初识Promise

什么是Promise?

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态) ；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

如何创建一个 new Promise和Promise.prototype.then使用

ajax = (method,url) =>{
    /*
    * 1.return new Promise((resolve,reject) = () =>{})
    * 2.任务成功就调用resolve，失败就调用reject
    * */
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest()
        request.open(method,url)
        request.onreadystatechange = () =>{
            if (request.readyState === 4){
                if (request.status < 400){
                    //成功就调用resolve，失败就调用reject
                    resolve.call(null,request.response)
                }else if (request.status >= 400){
                    reject.call(null,request)
                }
            }
        }
        request.send()
    })
}
// then方法接受两个函数(注意是函数,不要直接调用函数,调用的函数会立即执行!!!!)
// **成功**的时候执行第一个函数,**失败**的时候执行第二个函数
ajax('GET','/XXXXX').then((response) =>{},(request) =>{})

如何使用 如何使用 Promise.all

all的用法：谁跑得慢以谁为执行回调。all接受一个数组参数，里面的值最终都返回Promise对象 Promise.all()方法提供了并行执行异步操作的能力，并且在所有异步操作执行完成后才执行回调

let Promise1 = new Promise((resolve, reject) => {})
let Promise2 = new Promise((resolve, reject) => {})
let Promise3 = new Promise((resolve, reject) => {})

let p = Promise.all([Promise1,Promise2,Promise3])

p.then(() =>{
    //三个都成功则成功
},() =>{
    //只要有一个失败则失败
})

如何使用 Promise.race

race的用法：谁跑的快，以谁为准执行回调 race使用场景：比如我们可以用race给某个异步请求设置超时时间，并在超时后执行相应的操作

/*requestImg函数会异步请求一张图片，我把地址写为"图片的路径"，所以肯定是无法成功请求到的。
timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，
于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。
如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息*/
function requestImg () {
    let p = new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = function (){
            resolve(img);
        }
        img.src = '图片路径'
    });
    return p
}
function timeout(){
    let p = new Promise((resolve, reject) => {
        setTimeout(() =>{
            reject('图片请求超时')
        },5000);
    });
    return p
}
Promise.race([requestImg(),timeout()]).then((data) =>{
    console.log(data);
}).catch((err) =>{
    console.log(err)
})