JavaScript学习之ES6-Promise学习

最新推荐文章于 2022-09-14 06:00:00 发布

Three_ST

最新推荐文章于 2022-09-14 06:00:00 发布

阅读量149

点赞数

分类专栏： JavaScript Web前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_25482087/article/details/105129416

版权

JavaScript 同时被 2 个专栏收录

101 篇文章 0 订阅

订阅专栏

Web前端

73 篇文章 1 订阅

订阅专栏

Promise all() race() allSettled()

1.基本结构

::: tip

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('FULLFILLED’)
    },1000)
})

构造函数Promise必须接受一个函数作为参数，我们称该函数为handle，handle又包含resolve和reject两个参数，它们是两个函数。
定义一个判断变量是否为函数的方法

const isFunction = variable=>typeof variable==='function';

新建一个MyPromise的Class，接受一个handle作为参数

class MyPromise{
    constructor(handle){
        if(!isFunction(handle)){
            throw new Error('MyPromise must accept a function as a parameter')
        }
    }
}

:::

2.Promise状态和值

::: tip
Promise存在以下三种状态

Pending(进行中)
Fullfilled(已成功)
Rejected(已失败)
Promise的值是指状态改变时传递给回调函数的值
上文中handle函数包含 resolve 和 reject 两个参数，它们是两个函数，可以用于改变 Promise 的状态和传入 Promise 的值

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('FULLFILLED')
    },1000)
})

这里 resolve 传入的 “FULFILLED” 就是 Promise 的值

resolve : 将Promise对象的状态从 Pending(进行中) 变为 Fulfilled(已成功)
reject : 将Promise对象的状态从 Pending(进行中) 变为 Rejected(已失败)
resolve 和 reject 都可以传入任意类型的值作为实参，表示 Promise 对象成功（Fulfilled）和失败（Rejected）的值
了解了 Promise 的状态和值，接下来，我们为 MyPromise 添加状态属性和值
:::

::: danger
有限状态：

Pending->Fullfilled
Pending->Rejected
:::

::: tip

//定义三个常量 用于标记Promise对象的三种状态
const PENDIND = 'PENDING';
const FULLFILLED = 'FULLFILLED';
const REJECTED = 'REJECTED';

//再为MyPromise添加状态和值，并添加状态改变的执行逻辑
Class MyPromise{
    constructor(handle){
        if(!isFunction(handle)){
            throw new Error('MyPromise must accept a function as a parameter')
        }

        //添加状态
        this._status = PEDNING;
        //添加状态
        this._value = undefined;
        try{
            handle(this._resolve.bind(this),this._reject.bind(this)
        }catch(err){
            this._reject(err);
        }
    }

    //添加resolve时执行的函数
    _resolve(val){
        if(this._status!==PENDING) return
        this._status = FULFILLED;
        this._value = val;
    }
    //添加reject时执行的函数
    _reject(err){
        if(this._status!==PENDING) return
        this._status = REJECTED;
        this._value = err;
    }

}

:::

3.Promise的then方法

::: tip
Promise 对象的 then 方法接受两个参数：

promise.then(onFulfilled,onRejected)

参数可选
onFulfilled和onRejected都是可选参数

如果 onFulfilled 或 onRejected 不是函数，其必须被忽略

onFulfilled 特性

如果 onFulfilled 是函数：

当 promise 状态变为成功时必须被调用，其第一个参数为 promise 成功状态传入的值（resolve 执行时传入的值）
在 promise 状态改变前其不可被调用
其调用次数不可超过一次

onRejected 特性
如果 onRejected 是函数：
- 当 promise 状态变为失败时必须被调用，其第一个参数为 promise 失败状态传入的值（reject 执行时传入的值）
- 在 promise 状态改变前其不可被调用
- 其调用次数不可超过一次
多次调用
then 方法可以被同一个 promise 对象调用多次
- 当 promise 成功状态时，所有 onFulfilled 需按照其注册顺序依次回调
- 当 promise 失败状态时，所有 onRejected 需按照其注册顺序依次回调
返回
then 方法必须返回一个新的 promise 对象

promise2 = promise1.then(onFulfilled,onRejected);

promise支持链式调用

promise1.then(onFulfilled1,onRejected1).then(onFulfilled2,onRejected2);

这里涉及到 Promise 的执行规则，包括“值的传递”和“错误捕获”机制：

如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行下面的 Promise 解决过程：[[Resolve]](promise2, x)
- 若 x 不为 Promise ，则使 x 直接作为新返回的 Promise 对象的值，即新的onFulfilled 或者 onRejected 函数的参数.
- 若 x 为 Promise ，这时后一个回调函数，就会等待该 Promise 对象(即 x )的状态发生变化，才会被调用，并且新的 Promise 状态和 x 的状态相同。

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve()
    },1000)
})
let promise2 = promise.then(res=>{
    //返回一个普通值
    return 'this is a simple value'
})

promise2.then(res=>{
    console.log(res);//1s后打印出 this is a simple value
})

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve()
    },1000)
})

let promise2 = promise.then(res=>{
    //返回一个promise对象
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('this is a promise')
        },2000)
    })
})

promise2.then(res=>{
    console.log(res)//3s 后打印出 this is a promise
})

如果 onFulfilled 或者onRejected 抛出一个异常 e ，则 promise2 必须变为失败（Rejected），并返回失败的值 e，例如：

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('success')
    },1000)
})
let promise2 = promise1.then(res=>{
    setTimeout(()=>{
        throw new Error("这里抛出一个异常e")
    })
})

promise2.then(res=>{
    console.log(res)
},err=>{
    console.log(err)  //1秒后打印出: 这里抛出一个异常e
})

如果onFulfilled 不是函数且 promise1 状态为成功（Fulfilled）， promise2 必须变为成功（Fulfilled）并返回 promise1 成功的值，例如：

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('success')
    },1000)
})
promise2 = promise1.then('这里的onFulfilled本来就是一个函数，但现在不是')
promise2.then(res=>{
    console.log(res) // 1s 后打印出: success
},err=>{
    console.log(err)
})

如果 onRejected 不是函数且 promise1 状态为失败（Rejected），promise2必须变为失败（Rejected）并返回 promise1 失败的值，例如：

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject('fail')
    },1000)
})
promise2 = promise1.then(res=>res,'这里的onRejected本是一个函数，但是现在不是')
promise2.then(res=>{
    console.log(res)
},err=>{
    console.log(err) //1s后打印出: fail
})

根据上面的规则，我们来为完善 MyPromise

修改 constructor : 增加执行队列

由于 then 方法支持多次调用，我们可以维护两个数组，将每次 then 方法注册时的回调函数添加到数组中，等待执行

constructor(handle){
    if(!isFunction(handle)){
        throw new Error('MyPromise must accept a function as a parameter')
    }
    //添加状态
    this._status = PENDING;
    //添加状态
    this._value = undefined;
    //添加成功回调函数队列
    this._fulfilledQueues = [];
    //添加失败回调函数队列
    this._rejectedQueues = [];
    //执行handler
    try{
        handle(this._resolve.bind(this),this._reject.bind(this))
    }catch(err){
        this._reject(err)
    }

}

添加then方法
- 首先，then 返回一个新的 Promise 对象，并且需要将回调函数加入到执行队列中

//添加then方法
then(onFulfilled,onRejected){
    const {_value,_status} = this;
    switch(_status){
        //当状态为pending时，将then方法回调函数加入执行队列等待执行
        case PENDING:
            this._fulfilledQueues.push(onFulfilled);
            this._rejectedQueues.push(onRejected);
            break;
        //当状态已经改变时，立即执行对应的回调函数
        case FULFILLED:
            onFulfilled(_value);
            break;
        case REJECTED:
            onRejected(_value);
            break;
    }
    //返回一个新的Promise对象
    return new MyPromise((onFulfilledNext,onRejectedNext)=>{

    })
}

那返回的新的 Promise 对象什么时候改变状态？改变为哪种状态呢？

根据上文中 then 方法的规则，我们知道返回的新的 Promise 对象的状态依赖于当前 then 方法回调函数执行的情况以及返回值，例如 then 的参数是否为一个函数、回调函数执行是否出错、返回值是否为 Promise 对象。

进一步完善then方法

//添加then方法
then(onFulfilled,onRejected){
    const{_value,_status} = this;
    //返回一个新的Promise对象
    return new MyPromise((onFulfilledNext,onRejectedNext)=>{
        //封装一个成功时执行的函数
        let fulfilled = value=>{
            try{
                if(!isFunction(onFulfilled)){
                    onFulfilledNext(value)
                }else{
                    let res = onFulfilled(value);
                    if(res instanceof MyPromise){
                        //如果当前回调函数返回MyPromise对象，必须等待状态改变后再执行下一个函数
                        res.then(onFulfilledNext,onRejectedNext)
                    }else{
                        //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个回调函数
                        onFulfilledNext(res);
                    }
                }
            }catch(err){
                //如果执行函数出错，新的promise对象的状态为失败
                onRejectedNext(res);
            }
        }

        //封装一个失败时执行的函数
        let rejected = error=>{
            try{
                if(!isFunction(onRejected)){
                    onRejectedNext(error)
                }else{
                    let res = onRejected(error);
                    if(res instanceof MyPromise){
                        //如果当前回调函数返回MyPromise对象，必须等待其状态改变后再执行下一个函数
                        res.then(onFulfilledNext,onRejectedNext)
                    }else{
                        //否则会将返回结果直接作为参数，传入下一个then的回调函数，并理解执行下一个then的回调函数
                        onFulfilledNext(res)
                    }
                }
            }catch(err){
                //执行函数出错，新的promise对象为失败
                onRejectedNext(err)
            }
        }
        switch(_status){
        //当状态为pending时，将then方法回调函数加入执行队列等待执行
        case PENDING:
            this._fulfilledQueues.push(onFulfilled);
            this._rejectedQueues.push(onRejected);
            break;
        //当状态已经改变时，立即执行对应的回调函数
        case FULFILLED:
            onFulfilled(_value);
            break;
        case REJECTED:
            onRejected(_value);
            break;
        }
    })
}

接着修改 _resolve 和 _reject ：依次执行队列中的函数

当 resolve 或 reject 方法执行时，我们依次提取成功或失败任务队列当中的函数开始执行，并清空队列，从而实现 then 方法的多次调用，实现的代码如下：

//添加resolved时执行的函数
_resolve(val){
    if(this._status!==PENDING)return

    //依次执行成功队列中的函数，并清空队列
    const run=()=>{
        this._status = FULFILLED;
        this._value = val;
        let cb;
        while(cb= this._fulfilledQueues.shift()){
            cb(val)
        }
    }
    //为了支持同步的promise，这里采用异步调用
    setTimeout(()=>run(),0)
}
//添加reject时执行的函数
_rejected(err){
    if(this._status!==PEDNING) return;
    const run = ()=>{
        this._status = REJECTED;
        this._value = err;
        let cb;
        while(cb=this._rejectedQueues.shift()){
            cb(err)
        }
    }
    //为了支持同步的Promise，这里采用异步调用
    setTimeout(run,0)
}

这里还有一种特殊的情况，就是当 resolve 方法传入的参数为一个 Promise 对象时，则该 Promise 对象状态决定当前 Promise 对象的状态。

const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

上面代码中，p1 和 p2 都是 Promise 的实例，但是 p2 的resolve方法将 p1 作为参数，即一个异步操作的结果是返回另一个异步操作。
注意，这时 p1 的状态就会传递给 p2，也就是说，p1 的状态决定了 p2 的状态。如果 p1 的状态是Pending，那么 p2 的回调函数就会等待 p1 的状态改变；如果 p1 的状态已经是 Fulfilled 或者 Rejected，那么 p2 的回调函数将会立刻执行。

我们来修改_resolve来支持这样的特性

//添加resolve时执行的函数
_resolve(val){
    const run = ()=>{
        if(this._status!==PENDING) reutrn;
        //依次执行成功队列中的函数，并定义队列
        const runFulfilled = (value)=>{
            let cb;
            while(cb=this._fulfilledQueues.shift()){
                cb(value);
            }
        }
        //依次执行失败队列中的函数
        const runRejected = (error)=>{
            let cb;
            while(cb=this._rejectedQueues.shift()){
                cb(error)
            }
        }
        //如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
        //当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
        if(val instance of MyPromise){
            val.then(val=>{
                this._value = value;
                this._status = FULFILLED;
                runFulfilled(value)
            },err=>{
                this._value = err;
                this._status = REJECTED;
                runRejected(err);
            })
        }else{
            htis._value = err;
            this._status = FULFILLED;
            runFulfiles(val);
        }
    }
    //为了支持同步的Promise.这里采用异步调用
    setTimeout(run,0)
}

这样一个Promise就基本实现了，现在我们来加一些其它的方法

catch方法
相当于调用then方法，但只传入Rejected状态的回调函数

catch(onRejected){
    return this.then(undefined,onRejected);
}

静态resolve方法

static resolve(value){
    //如果参数是MyPromise实例，直接返回这个实例
    if(value instanceof MyPromise) return value;
    return new MyPromise(resolve=>resolve(value));
}

静态 reject 方法

//添加静态reject方法
static reject(value){
    return new MyPromise((resolve,reject)=>reject(value))
}

静态all方法

static all(list){
    return new MyPromise((resolve,reject)=>{
        //返回值集合
        let values = [];
        let const = 0;
        for(let [i,p] of list.entries()){
            //数组参数如果不是promise实例，先调用MyPromise resolve 
            this.resolve(p).then(res=>{
                values[i] = res;
                count++;
                //所有状态都变成fulfilled时返回MyPromise状态就变成fulfilled
                if(count===list.length) resolve(value)
            },err=>{
                //有一个被rejected时返回的MyPromise状态就变成rejected
                reject(err)
            })
        }
    })
}

静态race方法

static race(list){
    return new MyPromise((resovle,reject)=>{
        for(let p of list){
            //只要有一个实例率先该边状态，新的MyPromise的状态就跟着改变
            this.resolve(p).then(res=>{
                resolve(res)
            },err=>{
                reject(err)
            })
        }
    })
}

finally方法

finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

finally(cb){
    return this.then(value=>MyPromise.resolve(cb()).then(()=>value),reason=>MyPromise.resolve(cb().then(()=>{throw reason})))
}

这样一个完整的 Promsie 就实现了，大家对 Promise 的原理也有了解，可以让我们在使用Promise的时候更加清晰明了。

:::

4.完整Promise代码

::: tip

const isFunction=variable=>typeof variable==='function';
//定义Promise的三种状态
const PEDNING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class MyPromise{
    constructor(handle){
        if(!isFunction(handle)){
            throw new Error('MyPromise must accept a function as a parameter')
        }
        //添加状态
        this._status = PENDING;
        //添加状态
        this._value = undefined;
        //添加成功回调函数
        this._fulfilledQueues = [];
        //添加失败回调函数队列
        this._rejectedQueues = [];
        //执行handle
        try{
            handle(this.resolve.bind(this),this._rejected.bind(this))
        }catch(err){
            this._reject(err);
        }
    }
    //添加resolved时执行的函数
    _resolve(val){
        const run =()=>{
                if(this._status!==PENDING) return;
                //依次执行成功队列中的函数，并清空队列
                const runFulfilled = (value)=>{
                let cb;
                while(cb=this._fulfilledQueues.shift()){
                    cb(value);
                    }
                }
                //依次执行失败队列中的函数，并清空队列
                const runRejected=(error)=>{
                    let cb;
                    while(cb=this._rejectedQueues.shift()){
                        cb(error);
                    }
                }
                /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
                当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态*/
                if(val instanceof MyPromise){
                    val.then(value=>{
                        this._value=value;
                        this._status = FULFILLED;
                        runFulfilled(value);
                    },err=>{
                        this._value =err;
                        this._status = REJECTED;
                        runRejected(err);
                    })
                }else{
                    this._value = val;
                    this._status = FULFILLED;
                    runFulfilled(val);
                }
            }
            //为了支持同步的promise，这里采用异步调用
            setTimeout(run,0)
        }
        //添加reject时执行的函数
        _rejected(err){
            if(this._status!==PENDING) return;
            //依次执行失败队列中的函数，并清空队列
            const run =()=>{
                this._status = REJECTED;
                this._value = err;
                let cb;
                while(cb=this._rejectedQueue.shift()){
                    cb(err)
                }
            }
            //为了支持同步的Promise，这里采用异步调用
            setTimeout(run,0);
        }

        //添加then方法
        then(onFulfilled,onRejected){
            const {_value,_status} = this;
            //返回一个新的promise对象
            return new Promise((onFulfilledNext,onRejectedNext)=>{
                //封装一个成功时执行函数
                let fulfilled = value =>{
                    try{
                        if(!isFunction(onFulfilled)){
                            onFulfilledNext(value)
                        }else{
                            let res = onFulfilled(value);
                            if(res instanceof MyPromise){
                                //如果当前回调函数返回M有Promise对象，必须等待其状态改变后再执行下一个回调函数
                                res.then(onFulfilledNext,onRejectedNext)
                            }else{
                                //否则会将返回结果直接作为参数，传入下一个true的回调函数，并立即执行下一个痛then的回调函数
                                onFulfilledNext(res);
                            }
                        }
                    }catch(err){
                        //如果函数执行出错，新的promise对象状态为失败
                        onRejectedNext(err)
                    }
                }
                //封装一个失败时执行的函数
                let rejected = error=>{
                    try{
                        if(!isFunction(onRejected)){
                            onRejectedNext(error)
                        }else{
                            let res = onRejected(error);
                            if(res instanceof MyPromise){
                                //如果当前回调函数返回MyPromise,必须等待其状态改变后再执行下一个回调函数
                                res.then(onFulfilledNext,onRejectedNext)
                            }else{
                                //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                                onFulfilledNext(res);
                            }
                        }
                    }catch(err){
                        //如果函数执行出错，新的promise对象的状态为失败
                        onRejectedNext(err);
                    }
                }
                switch(_status){
                    //当状态为pending时，将then方法回调函数加入执行队列
                    case PENDING:
                        this._fulfilledQueues.push(fulfilled);
                        this._fulfilledQueues.push(rejected);
                        break;
                    case FULFILLED:
                        fulfilled(_value);
                        break;
                    case REJECTED:
                        rejected(_value);
                        break;
                }
            })
        }
        //添加catch方法
        catch(onRejected){
            return this.then(undefined,onRejected)
        }
        //添加静态resolve方法
        static resolve(value){
            //如果参数是MyPromsie实例，直接返回实例
            if(value instanceof MyPromise) return value;
            return new MyPromise(resolve=>resolve(value))
        }
        //添加静态rejected方法
        static rejecte(value){
            return new MyPromise((resolve,reject)=>reject(value))
        }
        //添加静态all方法
        static all(list){
            return new MyPromise((resolve,reject)=>{
                //返回值的集合
                let values = [];
                let count =0;
                for(let [i,p] of list.entries()){
                    //数组参数如果不是MyPromise实例，先调用MyPromise.resolve
                    this.resolve(p).then(res=>{
                        values[i]=res;
                        count++;
                        //所有的状态都变成fulfilled时返回MyPromoise就变成fulfilled
                        if(count===list.length) resolve(values)
                    },err=>{
                        //有一个被rejected时返回的MyPromise状态就变成rejected
                        reject(err);
                    })
                }
            })
        }
        //添加race方法
        static race(list){
            return new Promise((resolve,reject)=>{
                for(let p of list){
                    //只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
                    this.resolve(p).then(res=>{
                        resolve(res);
                    },err=>{
                        reject(err);
                    })
                }
            })
        }
        //finally
        finally(cb){
            return this.then(
                value=>MyPromise.resolve(cb()).then(()=>value),
                reason=>MyPromise.resolve(cb()).then(()=>{throw reason})
            );
        }
    }
}

:::

ES5实现Promise

Promose 实现Ajax请求

::: tip

const getJson = function(url){
    const promise = new Promise(function(resolve,reject){
        const handler = function(){
            if(this.readyState!==4){
                return;
            }
            if(this.status===200){
                resolve(this.response);
            }else{
                reject(new Error(this.statusText));
            }
        };
        const client = new XMLHttpRequest;
        client.open("GET",url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept","application/json");
        client.send();
    });

    return promise;
}

getJson("you-url/method").then(dunction(json){
    console.log("data:"+json);
},function(error){
    console.log("error:"+erros)
})

异常捕获

浏览器中未处理的Promise错误

一些浏览器(例如Chrome)能够捕获未处理的Promise错误。
unhandledrejection
监听unhandledrejection事件，即可捕获到未处理的Promise错误：

window.addEventListener('unhandledrejection', event => ···);

promise: reject的Promise这个事件是PromiseRejectionEvent实例，它有2个最重要的属性：

reason: Promise的reject值

window.addEventListener('unhandledrejection', event =>
{
    console.log(event.reason); // 打印"Hello, Fundebug!"
});

function foo()
{
    Promise.reject('Hello, Fundebug!');
}
foo();

当一个Promise错误最初未被处理，但是稍后又得到了处理，则会触发rejectionhandled事件：

window.addEventListener('rejectionhandled', event => ···);

示例代码：这个事件是PromiseRejectionEvent实例。

window.addEventListener('unhandledrejection', event =>
{
    console.log(event.reason); // 打印"Hello, Fundebug!"
});

window.addEventListener('rejectionhandled', event =>
{
    console.log('rejection handled'); // 1秒后打印"rejection handled"
});

function foo()
{
    return Promise.reject('Hello, Fundebug!');
}

var r = foo();

setTimeout(() =>
{
    r.catch(e =>{});
}, 1000);

Node.js中未处理的Promise错误

监听unhandledRejection事件，即可捕获到未处理的Promise错误：

process.on('unhandledRejection', reason =>
{
    console.log(reason); // 打印"Hello, Fundebug!"
});

function foo()
{
    Promise.reject('Hello, Fundebug!');
}

foo();

:::

promise.finally()

ES2018引入，不管Promise对象最后状态如何，都会执行操作

promise.then(resolve=>{...})
       .catch(error=>{...})
       .finally(()=>{...})

无论promise状态如何，执行完then和catch指定的回调函数都会执行finally指定的回调函数

promise.finally(()=>{
    //执行函数
});

//等价于
promise.then(
    result=>{
        //语句
        return result;
    },
    error=>{
        //语句
        throw error
    }
)

不用finally实现，需要为成功和失败情况各写一次，有了finally方法只需要写一次

Promise.prototype,finally = function(callback){
    let p = this.constructor;
    return this.then(
        value =>p.resolve(callback()).then(()=>value),
        reason=>p.resovel(callback()).then(()=>{throw reason})
    );
};

promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const promiseAll = Promise.all([p1,p2,p3]);

promiseAll的状态由p1,p2,p3决定，分为两者情况
- p1,p2,p3全部为fullfilled，promiseAll变为fullfilled,返回一个数组，传递给p的回调函数
- 其中一个变为rejected,promiseAll的状态就变为rejected，第一个返回的reject的值，返回给promiseALl

//eg1
const promise = [1,2,3,4,5,6].map(function(id){
    return  getJson('/post/'+id+".json");
});

Promise.all(promises).then(function(posts){
    //...
}).catch(function(reason){
    //...
});
//只有6个实例的状态都变成fullfilled，或者其中一个变成rejected，才会调用promise.all方法后面的回调函数


//eg2
const databasePromise = connectDatabase();
const booksPromise = databasePromise.then(findAllBooks);
const userPormise = databasePromise.then(getCurrentUser);

Promise.all([
    booksPromise,
    userPromise
]).then(([books,user])=>pickTopRecommendations(books,user));
//上面代码中，booksPromise和userPromise是两个异步操作，只有等到它们的结果都返回了，才会触发pickTopRecommendations这个回调函数。

::: danger
如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。
:::

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

//如果没有catch方法则会调用promise.all()的catch方法

promise.race()

Promise.race()同样是将多个Promise实例包装成新的Promise实例

const p = Promise.all([p1,p2,p3]);

Promise.race()方法的参数与Promise.all()方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。

const p = Promise.race([
    fetch('/resource-that-may-take-a-while'),
    new Promise(function(resolve,reject){
        setTimeout(()=>reject(new Error('request timeout')),5000)
    })
]);
p.then(console.log)
 .catch(console.error)

promise.allSettled()

本标准由ES2020引入。接收一组Promise实例作为参数，包装成新的Promise实例,所有的参数实例都返回结果，包装实例才结束

const promises = [
    fetch('/api-1'),
    fetch('/api-2'),
    fetch('/api-3'),
];
await Promise.allSettled(promises);//3分请求结束后 加载图标都消失
removeLoadingIndicator();

promise实例在函数监听结束后，返回数组

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);

// 过滤出成功的请求
const successfulPromises = results.filter(p => p.status === 'fulfilled');

// 过滤出失败的请求，并输出原因
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

promise.any()

任何一个为fullfilled则包装实例变为fullfilled，所有的变为rejected，则变为rejected
Promise.any()跟Promise.race()方法很像，只有一点不同，就是不会因为某个 Promise 变成rejected状态而结束。

const promises = [
  fetch('/endpoint-a').then(() => 'a'),
  fetch('/endpoint-b').then(() => 'b'),
  fetch('/endpoint-c').then(() => 'c'),
];
try {
  const first = await Promise.any(promises);
  console.log(first);
} catch (error) {
  console.log(error);
}

promise.resolve()

Promise.resolve('foo')
//equals
new Promise(resolve=>resolve('foo'))

案例应用

加载图片

const preloadImage = function(path){
    return new Promise(function(resolve,reject){
        const image = new Image();
        image.onload = resolve;
        image.onerror = reject;
        image.src = path;
    });
};

Three_ST

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习之ES6-Promise学习

Promise实现原理ECMAScript6入门Promise all() race() allSettled()1.基本结构::: tipnew Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('FULLFILLED’) },1000)})构造函数Promise必须接受一个函数...
复制链接

扫一扫