异步编程解决方案:Promise

4,534 阅读19分钟

前言

Promise是异步编程的常用方案,解决了ajax请求数据中的地狱回调问题,使代码看起来像同步一样,可读性高。本文从梳理知识点出发,参(chao)考(xi)了很多比较好比较权威的技术文对Promise的介绍以及Promise的实现方案,最后辅以大厂的常见异步面试题作为知识补充。

本文目录

  • Promise 介绍与基本用法
  • Promise 静态方法(Static Method)
  • Promise 原型方法(API)
  • Promise 优缺点
  • Promise 实现
  • Async await
  • 异步相关面试题

正文

Promise介绍与基本用法

Promise是什么

Promise是异步编程的一种解决方案,它代表了一个异步操作的最终完成或者失败。从语法层面上来讲,Promise是一个对象,从它可以获取异步操作的消息。

Promise对象有以下两个特点:

  • 1.对象状态不受外界影响。

    Promise对象有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

  • 2.状态改变后不会再变,会一直保持这个结果。

    Promsie对象状态只能由 pending => fulfilled/rejected, 一旦修改就不能再变。如果状态改变已经发生了,再对Promise对象添加回调函数,也会立即得到这个结果。

Promise基本用法

Promise是一个构造函数,new Promise 返回一个 promise 的实例对象,接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve、reject。

new Promise((resolve, reject) => {
    // 根据处理结果调用resolve()或reject()
})

来看一个用Promise实现Ajax操作的栗子

const getJSON = function(url) {
    const promise = new Promise((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('/posts.json').then((json) => {
    console.log(`Contents:${json}`);
}, (error) => {
    console.error('出错了', error);
});

上面代码中,getJSON是对XMLHttpRequest对象的封装,用于发出一个针对JSON数据的http请求,并且返回一个Promise对象。请求的数据状态码为200的时候,会调用resolve函数,否则调用reject函数,并且调用时都带有参数,将结果传递给回调函数。


Promise静态方法

我们可以把Promise构造函数打印出来看看:

(1)Promise.all()

Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例,通常用于处理多个并行异步操作。

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

Promise.all方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例。(Promise.all方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。)

p的状态由p1、p2、p3决定,分成两种情况。

(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。

(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

const p = Promise.all([p1, p2, p3]).then(data => {
    console.log(data); // [1, 2, 3] 返回的结果顺序和Promise实例数组顺序一样
}).catch(err => throw err);
(2)Promise.race()

Promise.race()同样是将多个Promise实例包装成一个新的Promise实例,与Promise.all()不同的是,Promise实例数组中只要有一个实例率先改变状态,新的Promise实例的回调函数就会返回那个率先改变的Promise实例的返回值。

const p = Promise.race([
    fetch('/api/user-info'),
    new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error('request timeout'), 5000)
    }
]);

p
    .then(res => console.log(res)) // 如果5秒内fetch方法返回结果,p的状态就会变成fulfilled,触发then方法的回调
    .catch(err => throw err); // 如果5秒后fetch方法没有返回结果,p的状态就会变成rejected,从而触发catch方法的回调
(3)Promise.resolve()

返回一个fulfilled状态的promise对象

Promise.resolve('hello');
// 相当于
const promise = new Promise(resolve => {
   resolve('hello');
});

参数有一下四种情况:

  • 1.Promise实例 如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
  • 2.thenable对象(具有then方法的对象) Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法。
let thenable = {
  then: function(resolve, reject) {
    resolve('jiaxin');
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // jiaxin
});
  • 3.原始值(string, number, date等),或者是不具备then方法的对象,返回一个Promise对象
const p = Promise.resolve('Hello');

p.then(function (s){
 console.log(s); // Hello
});
  • 4.不带任何参数,直接返回一个resolved状态的 Promise 对象。

    立即resolve()的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,而不是在下一轮“事件循环”的开始时。

setTimeout(function () { // 在下一轮“事件循环”开始时执行
  console.log('three');
}, 0);

Promise.resolve().then(function () { // 在本轮事件循环结束时执行
  console.log('two');
});

console.log('one');

// one
// two
// three
Promise.resolve();
(4)Promise.reject()
Promise.reject(reason)方法返回一个rejected状态的Promise实例
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s); // 出错了
});

Promise原型上的方法

我们把Promise的原型打印出来看看

(1)Promise.prototype.then(onFulfilled, onRejected)
onFulfilled 是用来接收promise成功的值
onRejected 是用来接收promise失败的原因
该方法返回一个新的Promise对象,因此可以采用链式写法,即then方法后面再调用另一个then方法。
(2)Promise.prototype.catch(onRejected)
Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数。返回的也是一个新的promise对象
// bad,不推荐
promise
    .then(data => /** success */, err => /** error */);
    
// good,推荐
promise.then(data => /** success */).catch(err => /** error */);

上述代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用catch方法,而不使用then方法的第二个参数。

(3)Promise.prototype.finally(onFinally)

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

promise
    .then(result => {···})
    .catch(error => {···})
    .finally(() => {···});

finally方法的回调函数不接受任何参数,因此不知道前面的 Promise 状态到底是fulfilled还是rejected。这表明,finally方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。

并且finally方法总是会返回原来的值


Promise优缺点

  • 优点:将异步操作以同步操作的流程表达出来,更好地解决了层层嵌套的回调地狱

  • 缺点:

    1.无法取消Promise,Promise一旦新建即立即执行,无法中途取消。
    2.如果不设置回调函数,Promise内部抛出的错误,不会反映到外部。
    3.当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。


实现Promise

/**
 * Promise 实现 遵循promise/A+规范
 * Promise/A+规范译文:
 * https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/#note-4
 */

// promise 三个状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

function Promise(excutor) {
    let that = this; // 缓存当前promise实例对象
    that.status = PENDING; // 初始状态
    that.value = undefined; // fulfilled状态时 返回的信息
    that.reason = undefined; // rejected状态时 拒绝的原因
    that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
    that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

    function resolve(value) { // value成功态时接收的终值
        if(value instanceof Promise) {
            return value.then(resolve, reject);
        }

        // 为什么resolve 加setTimeout?
        // 2.2.4规范 onFulfilled 和 onRejected 只允许在 execution context 栈仅包含平台代码时运行.
        // 注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilled 和 onRejected 方法异步执行,且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。

        setTimeout(() => {
            // 调用resolve 回调对应onFulfilled函数
            if (that.status === PENDING) {
                // 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)
                that.status = FULFILLED;
                that.value = value;
                that.onFulfilledCallbacks.forEach(cb => cb(that.value));
            }
        });
    }

    function reject(reason) { // reason失败态时接收的拒因
        setTimeout(() => {
            // 调用reject 回调对应onRejected函数
            if (that.status === PENDING) {
                // 只能由pending状态 => rejected状态 (避免调用多次resolve reject)
                that.status = REJECTED;
                that.reason = reason;
                that.onRejectedCallbacks.forEach(cb => cb(that.reason));
            }
        });
    }

    // 捕获在excutor执行器中抛出的异常
    // new Promise((resolve, reject) => {
    //     throw new Error('error in excutor')
    // })
    try {
        excutor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

/**
 * resolve中的值几种情况:
 * 1.普通值
 * 2.promise对象
 * 3.thenable对象/函数
 */

/**
 * 对resolve 进行改造增强 针对resolve中不同值情况 进行处理
 * @param  {promise} promise2 promise1.then方法返回的新的promise对象
 * @param  {[type]} x         promise1中onFulfilled的返回值
 * @param  {[type]} resolve   promise2的resolve方法
 * @param  {[type]} reject    promise2的reject方法
 */
function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) {  // 如果从onFulfilled中返回的x 就是promise2 就会导致循环引用报错
        return reject(new TypeError('循环引用'));
    }

    let called = false; // 避免多次调用
    // 如果x是一个promise对象 (该判断和下面 判断是不是thenable对象重复 所以可有可无)
    if (x instanceof Promise) { // 获得它的终值 继续resolve
        if (x.status === PENDING) { // 如果为等待态需等待直至 x 被执行或拒绝 并解析y值
            x.then(y => {
                resolvePromise(promise2, y, resolve, reject);
            }, reason => {
                reject(reason);
            });
        } else { // 如果 x 已经处于执行态/拒绝态(值已经被解析为普通值),用相同的值执行传递下去 promise
            x.then(resolve, reject);
        }
        // 如果 x 为对象或者函数
    } else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {
        try { // 是否是thenable对象(具有then方法的对象/函数)
            let then = x.then;
            if (typeof then === 'function') {
                then.call(x, y => {
                    if(called) return;
                    called = true;
                    resolvePromise(promise2, y, resolve, reject);
                }, reason => {
                    if(called) return;
                    called = true;
                    reject(reason);
                })
            } else { // 说明是一个普通对象/函数
                resolve(x);
            }
        } catch(e) {
            if(called) return;
            called = true;
            reject(e);
        }
    } else {
        resolve(x);
    }
}

/**
 * [注册fulfilled状态/rejected状态对应的回调函数]
 * @param  {function} onFulfilled fulfilled状态时 执行的函数
 * @param  {function} onRejected  rejected状态时 执行的函数
 * @return {function} newPromsie  返回一个新的promise对象
 */
Promise.prototype.then = function(onFulfilled, onRejected) {
    const that = this;
    let newPromise;
    // 处理参数默认值 保证参数后续能够继续执行
    onFulfilled =
        typeof onFulfilled === "function" ? onFulfilled : value => value;
    onRejected =
        typeof onRejected === "function" ? onRejected : reason => {
            throw reason;
        };

    // then里面的FULFILLED/REJECTED状态时 为什么要加setTimeout ?
    // 原因:
    // 其一 2.2.4规范 要确保 onFulfilled 和 onRejected 方法异步执行(且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行) 所以要在resolve里加上setTimeout
    // 其二 2.2.6规范 对于一个promise,它的then方法可以调用多次.(当在其他程序中多次调用同一个promise的then时 由于之前状态已经为FULFILLED/REJECTED状态,则会走的下面逻辑),所以要确保为FULFILLED/REJECTED状态后 也要异步执行onFulfilled/onRejected

    // 其二 2.2.6规范 也是resolve函数里加setTimeout的原因
    // 总之都是 让then方法异步执行 也就是确保onFulfilled/onRejected异步执行

    // 如下面这种情景 多次调用p1.then
    // p1.then((value) => { // 此时p1.status 由pending状态 => fulfilled状态
    //     console.log(value); // resolve
    //     // console.log(p1.status); // fulfilled
    //     p1.then(value => { // 再次p1.then 这时已经为fulfilled状态 走的是fulfilled状态判断里的逻辑 所以我们也要确保判断里面onFuilled异步执行
    //         console.log(value); // 'resolve'
    //     });
    //     console.log('当前执行栈中同步代码');
    // })
    // console.log('全局执行栈中同步代码');
    //

    if (that.status === FULFILLED) { // 成功态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try{
                    let x = onFulfilled(that.value);
                    resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值
                } catch(e) {
                    reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);
                }
            });
        })
    }

    if (that.status === REJECTED) { // 失败态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let x = onRejected(that.reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
        });
    }

    if (that.status === PENDING) { // 等待态
        // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中
        return newPromise = new Promise((resolve, reject) => {
            that.onFulfilledCallbacks.push((value) => {
                try {
                    let x = onFulfilled(value);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
            that.onRejectedCallbacks.push((reason) => {
                try {
                    let x = onRejected(reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
        });
    }
};

/**
 * Promise.all Promise进行并行处理
 * 参数: promise对象组成的数组作为参数
 * 返回值: 返回一个Promise实例
 * 当这个数组里的所有promise对象全部变为resolve状态的时候,才会resolve。
 */
Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
        let done = gen(promises.length, resolve);
        promises.forEach((promise, index) => {
            promise.then((value) => {
                done(index, value)
            }, reject)
        })
    })
}

function gen(length, resolve) {
    let count = 0;
    let values = [];
    return function(i, value) {
        values[i] = value;
        if (++count === length) {
            console.log(values);
            resolve(values);
        }
    }
}

/**
 * Promise.race
 * 参数: 接收 promise对象组成的数组作为参数
 * 返回值: 返回一个Promise实例
 * 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会继续进行后面的处理(取决于哪一个更快)
 */
Promise.race = function(promises) {
    return new Promise((resolve, reject) => {
        promises.forEach((promise, index) => {
           promise.then(resolve, reject);
        });
    });
}

// 用于promise方法链时 捕获前面onFulfilled/onRejected抛出的异常
Promise.prototype.catch = function(onRejected) {
    return this.then(null, onRejected);
}

Promise.resolve = function (value) {
    return new Promise(resolve => {
        resolve(value);
    });
}

Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

/**
 * 基于Promise实现Deferred的
 * Deferred和Promise的关系
 * - Deferred 拥有 Promise
 * - Deferred 具备对 Promise的状态进行操作的特权方法(resolve reject)
 *
 *参考jQuery.Deferred
 *url: http://api.jquery.com/category/deferred-object/
 */
Promise.deferred = function() { // 延迟对象
    let defer = {};
    defer.promise = new Promise((resolve, reject) => {
        defer.resolve = resolve;
        defer.reject = reject;
    });
    return defer;
}

/**
 * Promise/A+规范测试
 * npm i -g promises-aplus-tests
 * promises-aplus-tests Promise.js
 */

try {
  module.exports = Promise
} catch (e) {
}


async await

async函数是ES2017引入的新语法,是Generator 函数的语法糖,使得异步操作变得更加的方便。

来看一个axios发送请求获取数据的栗子,假设每一次发送请求的param都依赖前一个ajax返回的response:

// 回调函数的形式,形成回调地狱
axios.get('url1', {
    params
}).then(data1 => {
    axios.get('url2', {
        params: data1
    }).then(data2 => {
        axios.get('url3', {
            params: data2
        }).then(data3 => {
            axios.get('url4', {
                params: data3
            }).then(data4 => {
                // ....一直回调
            })
        })
    })
});


// Promise解决回调地狱
const request = (url, params) => {
    return axios.post(url, params)
        .then(data => Promise.resolve(data))
        .catch(error => Promise.reject(error));
};

request(url1, params1)
    .then(data1 => {
        return request(url2, data1);
    }).then(data2 => {
        return request(url3, data2);
    }).then(data3 => {
        return request(url4, data3);
    }).catch(error => throw new Error(err));
    

async函数的语法规则比较好理解,语义比起Generator函数的*和yield,要更加地清晰,async表函数里有异步操作,await表示紧跟在后面的表达式需要等待的结果。但是,async函数的难点在于误处理机制。任何一个await语句后面的Promise对象变为reject状态,那么整个async函数都会中执行。

错误处理,一种方法是将await后面的Promise对象再跟一个catch方法,处理前面可能出现的错误。

async function f() {
    await Promise.reject('出错了')
        .catch(e => console.log(e));
    return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
// 出错了
// hello world

另外一个方法,就是统一放在try..catch结构中

async function main() {
    try {
        const val1 = await firstStep();
        const val2 = await secondStep(val1);
        const val3 = await thirdStep(val1, val2);
    
        console.log('Final: ', val3);
    }
    catch (err) {
        console.error(err);
    }
}

总结:async函数可以看作是多个异步操作,包装成的一个Promise对象,而await命令就是内部then命令的语法糖。


相关面试题

1.异步笔试题(头条)

请写出下面代码的运行结果

async function async1() {
    console.log('async1 start'); // 4.输出'async1 start'
    await async2(); // 5.遇到await时,会将后面的代码执行一遍
    console.log('async1 end');//7.将await后面的代码加入到microtask中的Promise队列中,跳出async1函数来执行后面的代码
    // 11.寻找到微任务队列的第一个任务,输出'async1 end'
}

async function async2() {
    console.log('async2'); // 6.输出'async2'
}

console.log('script start'); // 1.打印'script start'

setTimeout(function() {
    console.log('setTimeout');
}, 0); // 2.加入宏任务队列中

async1(); // 3.调用async1函数

new Promise(function(resolve) { // 8.Promise中的函数立即执行,输出'promise1'
    console.log('promise1');
    resolve();
}).then(function() { // 9.promise中的then被分发到microtask的Promise队列中
    console.log('promise2');
});

console.log('script end'); // 10.script任务继续执行,输出'scriptend',一个宏任务执行完毕,去检查是否存在微任务

该题的本质,是考察setTimeout、promise、async await的实现及执行顺序,以及JS的事件循环机制。

先来了解下宏任务(macrotask)和微任务(microtask):

宏任务

宏任务(macrotask):可以理解成是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

macrotask主要包括:

(1)script(整体代码)
(2)setTimeout、setInterval
(3)I/O
(4)UI交互事件
(5)postMessage
(6)MessageChannel
(7)setImmediate(Node.js环境)
微任务

微任务(microtask),可以理解是在当前task执行结束后立即执行的任务。也就是说,在当前task任务后,下一个task之前,在渲染之前。

microtask主要包括:

(1)promise
(2)process.nextTick(Node.js环境)
(3)MutationObserver
(4)Object.observer(废弃)
2.setTimeout、Promise、Async/Await 的区别

1) setTimeout 属于宏任务,setTimeout 的回调函数会放在宏任务队列里,等到执行栈清空以后执行

2) promise 属于微任务,promise.then 里的回调函数会放在微任务队列里,等宏任务里的同步代码执行完再执行

3) async 方法执行时,需要await时,会立即执行表达式,然后把表达式后面的代码放到微任务队列中,让出执行栈让同步代码先执行,等当前宏任务完,再执行微任务队列里的任务

3.Async/Await 如何通过同步的方式实现异步(头条、微医)

通过 await 将异步代码改造成同步代码

看如下例子:

   (async () => {
       var a = await A();
       var b = await B(a);
       var c = await C(b);
       var d = await D(c);
   })();
   // Generator
   run(function*() {
       const res1 = yield readFile(path.resolve(__dirname, '../data/a.json'), { encoding: 'utf8' });
       console.log(res1);
       const res2 = yield readFile(path.resolve(__dirname, '../data/b.json'), { encoding: 'utf8' });
       console.log(res2);
   });

   // async/await
   const readFile = async ()=>{
       const res1 = await readFile(path.resolve(__dirname, '../data/a.json'), { encoding: 'utf8' });
       console.log(res1);
       const res2 = await readFile(path.resolve(__dirname, '../data/b.json'), { encoding: 'utf8' });
       console.log(res2);
       return 'done';
   }
   const res = readFile();

4.JS 异步解决方案的发展历程以及优缺点。(滴滴、挖财、微医、海康)

1、 回调函数(callback)

    setTimeout(() => {
        // callback 函数体
    }, 1000)
    ajax('XXX1', () => {
        // callback 函数体
        ajax('XXX2', () => {
            // callback 函数体
            ajax('XXX3', () => {
            // callback 函数体
            })
        })
    })

缺点:回调地狱,不能用 try catch 捕获错误,不能 return

回调地狱有什么问题?

  • 缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符
  • 嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身
  • 嵌套函数过多的多话,很难处理错误

优点:解决了同步阻塞的问题(只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。)

2、 Promise

Promise就是为了解决callback的问题而产生的。

Promise 实现了链式调用,也就是说每次 then 后返回的都是一个全新 Promise,如果我们在 then 中 return ,return 的结果会被 Promise.resolve() 包装。

    ajax('XXX1')
   .then(res => {
     // 操作逻辑
     return ajax('XXX2')
 }).then(res => {
     // 操作逻辑
     return ajax('XXX3')
 }).then(res => {
     // 操作逻辑
 })

优点:解决了回调地狱的问题 缺点:无法取消promise,错误需要通过回调函数来捕获

3、 Generator

function *fetch() {
    yield ajax('XXX1', () => {})
    yield ajax('XXX2', () => {})
    yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()

特点:可以控制函数的执行,可以配合 co 函数库使用

  1. Async/await
async function test() {
    // 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式
    // 如果有依赖性的话,其实就是解决回调地狱的例子了
    await fetch('XXX1')
    await fetch('XXX2')
    await fetch('XXX3')
}

优点是:代码清晰,不用像 Promise 写一大堆 then 链,处理了回调地狱的问题。

缺点:await 将异步代码改造成同步代码,如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

5.Promise 构造函数是同步执行还是异步执行,那么 then 方法呢?(微医)

Promise 构造函数是同步执行的,而 then 是异步执行的,then 是属于微任务。

这里看一个例子:

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(5);
  console.log(2);
}).then(val => {
  console.log(val);
});
promise.then(() => {
  console.log(3);
});
console.log(4);
setTimeout(function() {
  console.log(6);
});
6.模拟实现一个 Promise.finally

finally() 方法返回一个Promise。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的函数。为在Promise状态被改变后会执行finally中的回调。 这避免了同样的语句需要在then()和catch()中各写一次的情况。

先看promise实例finally的特性

  • 返回为thenable对象,then函数中调用reject 则返回的以此为拒因的promise
  • 返回为thenable对象,执行then抛出错误, 则返回的以此错误为拒因的promise
  • 返回为thenable对象, 调用resolve,则返回状态和值跟上层一样的promise
  • finally回调返回rejected状态的Promise, 则返回的以此为拒因的promise
  • finally回调执行如果抛出错误,则返回的以抛错为拒因的promise
  • finally回调返回fulfilled状态的promise,则返回状态和值跟上层一样的promise
  • 其他情况,则返回状态和值跟上层一样的promise

关于实现,下面第一个是基于之前resolvePromise函数实现的, 第二个是阮一峰ES6文章中的实现
阮一峰 ECMAScript6入门 - Promise.prototype.then

Promise.prototype._finally = function (cb) {
    const that = this;
    function resolvePromise(x, resolve, reject) {
        if (x instanceof Promise) {
            x.then(() => that.then(resolve, reject), reject);
        } else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {
            try { // 是否是thenable对象(具有then方法的对象/函数)
                let then = x.then;
                if (typeof then === 'function') {
                    then.call(x, () => that.then(resolve, reject), reject);
                } else { // 说明是一个普通对象/函数
                    that.then(resolve, reject);
                }
            } catch (e) {
                reject(e);
            }
        } else {
            that.then(resolve, reject);
        }
    }
    return new Promise((resolve, reject) => {
        try {
            var v = cb();
            resolvePromise(v, resolve, reject)
        } catch (err) {
            reject(err);
        }
    })
}

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};
7.介绍下 Promise.all 使用、原理实现及错误处理

Promise.all使用:

const p = Promise.all([p1, p2, p3]);
p.then(res => /* to do */)
 .catch(err => reject(err));

Promise.all特性:

  • 对Promise实例进行并行处理,接收一个promise对象组成的数组作为参数
  • 当这个数组里的所有promise对象全部进入FulFilled状态时,一次性resolve一个promise实例对象,
  • 当数组里只要存在一个reject状态的promise对象,则返回失败的信息
Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let values = [];
        let count = 0;
        promises.forEach((promise, index) => {
            promise.then(value => {
                values[index] = value;
                count++;
                if (count === promises.length) resolve(values)
            }, reject)
        })
    }
}

Promise.all错误处理

  • 1.全部改为串行调用(失去了node并发优势)
  • 2.当promise捕获到error的时候,代码吃掉这个异常,返回resolve,约定特殊格式表示这个调用成功了
const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 0)
});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 200)
});

const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        try {
            console.log(ABC.efd);
        } catch (err) {
            resolve('error') // 这里是关键
        }
    },100)
});

Promise.all([p1, p2, p3]).then((results) => {
    console.log('success');
    console.log(results);
}).catch((error) => {
    console.log('err');
    console.log(error);
})

// Output: 'success' [1, 2. 'error']
8.设计并实现 Promise.race()
const p = Promise.race([p1, p2, p3]);

Promise.race()特性:

  • 与all一样,参数为多个Promise实例对象组成的数组
  • 与all不一样的是,Promise.race是只要实例数组中有一个实例率先改变状态,就会把这个率先改变状态的promise的返回值传递给p的回调函数。 Promise.race的实现
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        promises.forEach((promise) => {
            promise.then(resolve, reject);
        })
    })
}

参考资料

木易杨前端进阶 每日壹题

阮一峰 ECMAScript6入门 Promise对象

Promise MDN

浏览器的Tasks、microtasks、queues和schedules

阮一峰 ECMAScript6入门 async函数

混沌传奇 从零一步一步实现一个完整版的Promise

Promise A+ 规范