1
文 / 景朝霞
来源公号 / 朝霞的光影笔记
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);
            }
        }
    }});
};

交流

公号首发:朝霞的光影笔记


Pink
269 声望14 粉丝

没有什么是20遍解决不了的,如果有~那就再写20遍