async/await 真不是你想象中那么简单

摘要：第二种方法一开始就发起了个请求并等待请求都到达后获取数据。请求返回的数据秒后就能操作了这种方法比第二种方法可以更快处理数据。如果请求时间是依次递减的那么和方法二效果是一样在有多个请求时这种情况一般不存在。

先上代码

function getData(data, time) {
                return new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        resolve(data);
                    }, time)
                })
            }
            let results = [];
            let startTime = new Date();
            laucher();

   async function laucher() {
                let dataA = await getData("a", 2000);
                results.push(`${dataA}在${new Date() - startTime}毫秒放入`);
                let dataB = await getData("b", 3000);
                results.push(`${dataB}在${new Date() - startTime}毫秒放入`);
                let dataC = await getData("c", 1000);
                results.push(`${dataC}在${new Date() - startTime}毫秒放入`);
                console.log(results, `输出时间${new Date() - startTime}毫秒`);
            }
            

输出

["a在2002毫秒放入", "b在5004毫秒放入", "c在6006毫秒放入"] "输出时间6006毫秒"

 async function laucher() {
              let dataAPromise = getData("a", 2000);
              let dataBPromise = getData("b", 3000);
              let dataCPromise = getData("c", 1000);
              let promises = [dataAPromise, dataBPromise, dataCPromise];
              results = await Promise.all(promises);
              console.log(results, `输出时间${new Date() - startTime}毫秒`);
            }

输出

["a", "b", "c"] "输出时间3006毫秒"

           async function laucher() {
              let dataAPromise = getData("a", 2000);
              let dataBPromise = getData("b", 3000);
              let dataCPromise = getData("c", 1000);
              dataA = await dataAPromise;
              results.push(`${dataA}在${new Date() - startTime}毫秒放入`);
              dataB = await dataBPromise;
              results.push(`${dataB}在${new Date() - startTime}毫秒放入`);
              dataC = await dataCPromise;
              results.push(`${dataC}在${new Date() - startTime}毫秒放入`);
              console.log(results, `输出时间${new Date() - startTime}毫秒`);
            }

输出

["a在2003毫秒放入", "b在3001毫秒放入", "c在3001毫秒放入"] "输出时间3002毫秒"

     async function laucher() {
              let dataAPromise = getData("a", 2000);
              let dataBPromise = getData("b", 3000);
              let dataCPromise = getData("c", 1000);
              (async () => {
                dataA = await dataAPromise;
                results.push(`${dataA}在${new Date() - startTime}毫秒放入`);
              })();
              (async () => {
                dataB = await dataBPromise;
                results.push(`${dataB}在${new Date() - startTime}毫秒放入`);
                console.log(results, `输出时间${new Date() - startTime}毫秒`);//results放在最后返回的请求中
              })();
              (async () => {
                dataC = await dataCPromise;
                results.push(`${dataC}在${new Date() - startTime}毫秒放入`);
              })();
            }

输出

["c在1002毫秒放入", "a在2002毫秒放入", "b在3003毫秒放入"] "输出时间3003毫秒"

使用setTimeout模拟了3条异步请求,分别2000,3000,1000毫秒后返回"a", "b", "c",
第一种方法很好理解，就是一步一步执行,这种方法适合请求参数依赖上一个请求返回值的情况,在这里是不存在这种关系的,也就是这种方法在这里效率是比较低的。

第二种方法一开始就发起了3个请求,并等待3请求都到达后获取数据。

第三种方法也一开始就发起了3个请求,并在请求到达后依次执行,因为a请求到达时间是2秒,a请求到达后,把a的结果推入results，再往下执行,b请求是3秒,b请求迟a请求一秒到达,也就是再过一秒后把b的结果推入results,,c的请求是1秒,这个时候c早已到达,在这轮循环末尾可以立即把c推入。a请求返回的数据2秒后就能操作了,这种方法比第二种方法可以更快处理数据。如果请求时间是依次递减的,那么和方法二效果是一样,在有多个请求时这种情况一般不存在。

第四种方法和第三种方法的区别是最先到达的请求最快放入结果集,也就是我不用排队等待处理,哪个数据先返回我就先处理哪个数据,假如c请求返回的数据需要花比较长的时间处理,我在一秒后就能开始处理了,但是第三种方法我得3秒后才能开始处理。可以看到我把results的输出放在了b请求到达的函数中,因为results在最后一个请求到达后才能完整输出，与方法三的区别是获取结果的操作也是异步的,这个很关键，也是和方法三最大的区别,通过在外层包装一个自执行函数,可以防止await的操作权跳出laucher外部,从而并发发起3个获取结果的操作。可能大家会有疑问假如我不清楚哪个请求最后到达,那怎么获取最后的results值,这种情况可以在外面包一个Promise.all,可以仔细看一下下面两个函数的区别

  async function laucher() {
              let dataAPromise = getData("a", 2000);
              let dataBPromise = getData("b", 3000);
              let dataCPromise = getData("c", 1000);
              let promises = [dataAPromise, dataBPromise, dataCPromise];
              results = await Promise.all(promises);
              console.log(results, `输出时间${new Date() - startTime}毫秒`);
            }

输出

["a", "b", "c"] "输出时间3003毫秒"

    async function laucher() {
              let dataAPromise = getData("a", 2000);
              let dataBPromise = getData("b", 3000);
              let dataCPromise = getData("c", 1000);
              let promises = [dataAPromise, dataBPromise, dataCPromise];
              results = await Promise.all(promises.map(async function (promise) {
                let data = await promise;
                console.log(`${data}在${new Date() - startTime}毫秒输出`);
                //这里可以提前处理数据
                return data
              }));
              console.log(results);
            }

输出

c在1002毫秒输出
a在2003毫秒输出
b在3003毫秒输出
["a", "b", "c"] "输出时间3004毫秒"

如果请求之间不存在继发关系,并且请求到达后要执行一些运算,那么按效率来说
方法4 > 方法3 > 方法2 > 方法1
每种方法都对应一种加载的策略,以一个使用场景来说明一下，向后台加载页面组件(假设组件个数是3)
执行流程:

方法一: 发起组件1的请求 -> 组件1数据到达后渲染组件1 -> 发起组件2的请求 -> 组件2数据到达后渲染组件2 -> 发起组件3的请求 -> 组件3数据到达后渲染组件3

方法二: 同时发起组件1,2,3的请求 -> 组件1,2,3的数据都到达后渲染组件1,2,3

方法三: 同时发起组件1,2,3的请求 -> 组件1数据到达后渲染组件1 -> 组件2数据到达后渲染组件2 -> 组件3数据到达后渲染组件3

方法四: 同时发起组件1,2,3的请求 -> 最快到达的组件数据到达后渲染最快到达的组件 -> 第二快到达的组件数据到达后渲染第二快到达的组件 -> 最慢到达的组件数据到达后渲染最慢到达的组件

针对以上场景可以看出方法四可以让我们的页面最快渲染出内容

可以看出虽然引入async/await,可以让你的代码很精简,但是async/await本身的执行流程却是很复杂的,下面的代码你可以猜一下输出结果(补充一点:有的文章会指出forEach函数不能放入异步操作,这种结论是错误的,如果是继发关系确实不适宜用forEach，但不能表示不能放入异步操作,反而这种操作能提高获取数据的效率)

 [1, 2].forEach(async function (value) {
              console.log(value);
              await console.log("a");
              console.log("c");
              await console.log("d");
              console.log("e");
            })
            console.log(3);