Promise | all、race方法（代码版）

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

---

Promise

这次，主要介绍 Promise 的all方法和race方法的原理。

【Promise | 手写原理】
【Promise | catch、finally 方法】

all 方法

• 使用

let fs = require('fs');
let p = new Promise((resolve, reject) => {
    fs.readFile('./name.txt', 'utf8', function (err, data) {
        if (err) {
            reject(err);
        }
        resolve(data);
    });
});
Promise.all([1,2,p ]).then(data => {
    console.log('data', data);
}, err => {
    console.log('err', err);
});

• 思路

1. 参数：数组
2. 链式调用then方法：可以
   • all 方法返回一个新的Promise
3. 返回值：数组 or 失败原因
   • 一个项失败了，走入失败态的回调函数 =>失败原因
   • 全部成功了，走入成功态的回调函数 => 数组

• 问题

1. 数组项，需要判断是否为一个Promise？
2. 如何按照参数数组的顺序生成结果数组？

• 解决

1. 在【手写Promise原理】里面有如何判断是否为Promise，可以参考
2. 结果数组的顺序与参数数组保持一致：i 计数与参数数组的length相等，即停。

• 代码

function isPromise(x) {
    if (typeof x === 'function' || (typeof x === 'object' && x != null)) {
        if (typeof x.then === 'function') {
            return true;
        }
    }
    return false;
}

Promise.all = function (values){
    return new Promise((resolve, reject) => {
        let arr = [];
        let i = 0;
        let processData = (key, data) => {
            arr[i] = data;
            if (++i === values.length) {
                resolve(arr);
            }
        };
        for (let i = 0; i < values.length; i++) {
            let current = values[i];
            if (isPromise(current)) {
                current.then(y => {
                    processData(i, y);
                }, reject);
            } else {
                processData(i, current);
            }
        }
    });
};

race 方法

• 使用

let fs = require('fs');
let p = new Promise((resolve, reject) => {
    fs.readFile('./name.txt', 'utf8', function (err, data) {
        if (err) {
            reject(err);
        }
        resolve(data);
    });
});
Promise.all([2,p ]).then(data => {
    console.log('data', data);
}, err => {
    console.log('err', err);
});

• 思路

1. 参数：数组
2. 链式调用then方法：可以
   • all 方法返回一个新的Promise
3. 返回值：比赛谁先回来
   • 一个项失败了，走入失败态的回调函数 =>失败原因
   • 先成功的那一项，走入成功态的回调函数 => 比赛

• 问题

1. 数组项，需要判断是否为一个Promise？

• 解决

1. 在【手写Promise原理】里面有如何判断是否为Promise，可以参考。

• 代码

function isPromise(x) {
    if (typeof x === 'function' || (typeof x === 'object' && x != null)) {
        if (typeof x.then === 'function') {
            return true;
        }
    }
    return false;
}
Promise.race = function (values){
    return new Promise((resolve, reject) => {
        for (let i = 0; i < values.length; i++) {
            let current = values[i];
            if (isPromise(current)) {
                current.then(resolve, reject);
            } else {
                resolve(current);
            }
        }
    }});
};

△文章首发ID：zhaoxiajingjing