面试那些事

手写前端promise常用方法

2021-11-25  本文已影响0人  _静夜听雨_

ES6出现以后,promise成为请求必备,今天我们来手写一下常用的几个promise方法。如:all、race、any、finally,这样可以方便我们更清楚它的执行原理,从而加深对promise的理解。

all

接收一个Promise数组,数组中如有非Promise项,则此项当做成功。如果所有Promise都成功,则返回成功结果数组。如果有一个Promise失败,则返回这个失败结果

function all(promises){
    const result = [];
    let count = 0;
    return new Promise((resolve, reject)=>{
        const addData = (index, value) =>{
            result[index] = value;
            count++;
            if(count === promises.length){
                resolve(result);
            }
        }
        promises.forEach((promise, index) => {
            if(promise instanceof Promise){
                promise.then(res => {
                    addData(res, index);
                }, err => {
                    reject(err);
                });
            }else{
                addData(index, promise);
            }
        });
    });
}

race

接收一个Promise数组,数组中如有非Promise项,则此项当做成功。哪个Promise最快得到结果,就返回那个结果,无论成功失败

function race(promises){
    return new Promise((resolve, reject) => {
        promises.forEach((promise) => {
            if(promise instanceof Promise){
                promise.then(res => {
                    resolve(res)
                }, err => {
                    reject(err)
                });
            }else{
                resolve(promise)
            }
        });
    });
}

any

any与all相反。接收一个Promise数组,数组中如有非Promise项,则此项当做成功。如果有一个Promise成功,则返回这个成功结果。如果所有Promise都失败,则报错

function any(promises){
    return new Promise((resolve, reject) => {
        let count = 0;
        promises.forEach((promise)=>{
            promise.then(res=>{
                resolve(res);
            }, err => {
                count++;
                if(count === promises.length){
                    reject(new Error('All promises were rejected'))
                }
            });
        });
    });
}

finally

接收一个回调函数,但无参数接收.无论成功失败状态,都会执行finally

Promise.prototype.finally = function(callback){
    return this.then(res => {
        callback();
        return res;
    }, err => {
        callback();
        throw new Error(err);
    });
}
上一篇 下一篇

猜你喜欢

热点阅读