什么是Promise,以及工作中如何使用

一、Promise是一种异步编程的解决方案,用来解决异步回调地狱的问题(俗称套娃),它保存着未来将要结束的事件。
 
二、Promise它有三种状态进行中,已成功,已失败,只有异步返回的结果才知道当前是哪一种状态。 一旦状态改变就不会在改变了,Promise状态改变只有两种可能,从进行中到已成功,出进行中到已失败。
 
三、Promise什么时候使用,有异步操作的时候都可以使用,根据需求。  比如 封装ajax请求,比如做一个抽奖优惠券的功能。
 
四、基本用法,如果异步操作成功就调用resolve,如果失败就调用reject。 然后通过then方法调用,then方法里面接收2个回调函数,一个是成功时,一个失败时间。   或者用then  和   catch  
注意:new Promise 这个构造函数里面是立即执行函数。
var p1 = new Promise((resolve,reject)=>{
    resolve("ok")
    //reject("失败")
})
p1.then((el)=>{
    console.log(el)
},(err)=>{
    console.log(err)
})

五、Promise封装JQ ajax (简单版)   

function ajax(url){
    return new Promise((resolve,reject)=>{
        $.ajax({
            url:url,
            type:"get",
            success:function(data){
                resolve(data.data)
            },
            error(error){
                reject(error);
            }
        })
    })
}
ajax(URLs)
.then((el)=>{
    console.log(el)
})
.catch((err)=>{
    console.log(err)
})

六、封装一个抽奖功能,每次点击时生成随机数并且乘100取整。 通过判断来进行返回

var btn = document.getElementById("btn")
btn.addEventListener('click',function(){
    const pp = new Promise((resolve,reject)=>{
        var n = parseInt(Math.random()*100)
        if(n<=30){
            resolve(n)
        }else{
            reject(n)
        }
    })

    pp.then((el)=>{
        alert("中奖了,号码是"+el)
    }).catch((err)=>{
        alert("没有中奖,号码是"+err)
    })
})

七、Promise 多个异步任务

Promise.all 并发多个异步任务,全部成功了才返回then

Promise.race 并发多个任务,有一个异步任务完成就返回then,赛跑

var a1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log("我是第一个A1")
        resolve('okA1')
    },2000)
})
var a2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log("我是第二个A2")
        resolve('OKA2')
    },5000)
})
var a3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log("我是第三个A3")
        resolve('okA3')
    },1000)
})

//并发处理多个异步任务,所有的任务完成了才可以得到结果。或者有一项是 reject就直接返回 catch
Promise.all([a1,a2]).then((el)=>{
    console.log(el)
}).catch((err)=>{
    console.log(err)
})

//并发处理多个异步任务,只要完成了一个任务就可以得到结果
Promise.race([a3,a2,a1]).then(el=>{
    console.log(el+"我是race")
})

以上就是工作中继承用的到的promise的一些操作

原文地址:https://www.cnblogs.com/chengxiang123/p/14438878.html