异步操做之 Promise 和 Async await 用法进阶

ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖均可以更好解决多层回调问题, 详细用法可参考：http://www.javashuo.com/article/p-rxlzxwpe-du.html，下面进一步介绍 promise 和 async/await 用法的异同。

首先定义如下三个异步函数：

function sleep3000() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('sleep3000 执行完成');
            resolve(new Date());
        }, 3000);
    })
};

function sleep2000() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('sleep2000 执行完成');
            resolve(new Date());
        }, 2000);
    })
};
function sleep4000() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('sleep4000 执行完成');
            resolve(new Date());
        }, 4000);
    })
};

1. 使用 promise 方法分别执行以上三个函数

console.log('Now：', new Date());

sleep3000().then((d) => {
    console.log('3000：', d);
})

sleep2000().then((d) => {
    console.log('2000：',d);
})

sleep4000().then((d) => {
    console.log('2000：',d);
})

最终打印结果：

Now： 2019-04-08T02:29:38.388Z
sleep2000 执行完成
2000： 2019-04-08T02:29:40.398Z
sleep3000 执行完成
3000： 2019-04-08T02:29:41.398Z
sleep4000 执行完成
2000： 2019-04-08T02:29:42.394Z

2. 使用 promise.all() 方法

Promise 的 all() 方法提供了并行执行异步操做的能力，即在全部异步操做执行完后才执行回调， all()里面接收一个数组，数组中每一个元素都返回一个 promise 对象。

all()里面的异步都执行完成后，才会把每一个异步结果以数组的形式放入 then 中。

某些状况下，若是上面sleep3000、sleep200、sleep4000分别表明页面不一样模块的加载时间，在页面刚打开时，须要当全部模块加载完成后，清除loading。此时能够做以下处理：

console.log('Now：', new Date());

Promise.all([
    sleep2000(),
    sleep3000(),
    sleep4000()
]).then((res) => {
    console.log(res)
})

最终打印结果：

Now： 2019-04-08T02:43:07.139Z
sleep2000 执行完成
sleep3000 执行完成
sleep4000 执行完成
[ 2019-04-08T02:43:09.144Z,
  2019-04-08T02:43:10.145Z,
  2019-04-08T02:43:11.144Z ]

3. 使用 promise.race() 方法

Promise 的 race() 方法 与 all () 相反，即只以执行最快的那个promise为准，一旦race()中的某个promise解决或拒绝，全部返回的 promise就会解决或拒绝。

console.log('Now：', new Date());

Promise.race([
    sleep2000(),
    sleep3000(),
    sleep4000()
]).then((res) => {
    console.log(res)
})

由于 sleep2000 最早执行完成，因此在2秒后，就会当即进入then。

最终打印结果：

Now： 2019-04-08T02:44:34.193Z
sleep2000 执行完成
2019-04-08T02:44:36.200Z
sleep3000 执行完成
sleep4000 执行完成

注意：2秒进入 then 后， sleep3000 和 sleep4000 并无被中止, 仍会继续走完，只是不会处理resolve或reject。

4. async/await 处理以上三个函数

console.log('Now：', new Date());

async function getDate () {
    let res1 = await sleep3000();
    let res2 = await sleep2000();
    let res3 = await sleep4000();
    console.log('3000：', res1);
    console.log('2000：', res2);
    console.log('4000：', res3);
}

getDate();

最终打印结果：

Now： 2019-04-08T02:58:23.990Z
sleep3000 执行完成
sleep2000 执行完成
sleep4000 执行完成
3000： 2019-04-08T02:58:26.996Z
2000： 2019-04-08T02:58:29.001Z
4000： 2019-04-08T02:58:33.004Z

经过打印时间，可见，每处理完前一个await，才会处理下一个await，上面全部处理完花费了9秒。

因此， 只有当处理后面await须要前一个await返回值时，才能够用以上方法。

5. async/await 中使用 promise.all 并行处理异步操做

当三个异步相互之间没有关系，须要同时发送时：

console.log('Now：', new Date());

async function getdate () {
    let res1 = sleep3000();
    let res2 = sleep2000();
    let res3 = sleep4000();
    let res = await Promise.all([res1, res2, res3]);
    console.log(res);
}

getdate();

最终打印结果：

sleep2000 执行完成
sleep3000 执行完成
sleep4000 执行完成
[ 2019-04-08T03:11:24.280Z,
  2019-04-08T03:11:23.280Z,
  2019-04-08T03:11:25.275Z ]

注意：

对比 2 和 5 的打印结果，能够看出，两者打印的返回数组里面的顺序是有区别的：

• 只用promise.all()时，各个异步是无序的；
• 在 async/await 中使用 promise.all(), 各个异步是有序的。