美文网首页面试那些事
手写前端promise常用方法

手写前端promise常用方法

作者: _静夜听雨_ | 来源:发表于2021-11-25 09:31 被阅读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);
        });
    }
    

    相关文章

      网友评论

        本文标题:手写前端promise常用方法

        本文链接:https://www.haomeiwen.com/subject/tbutxrtx.html