异步编程解决方案:Promise1.对象状态不受外界影响。 Promise对象有三种状态：pending（进行中）、fu

前言

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 函数库使用

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+ 规范