摘要：第二種方法一開(kāi)始就發(fā)起了個(gè)請(qǐng)求并等待請(qǐng)求都到達(dá)后獲取數(shù)據(jù)。請(qǐng)求返回的數(shù)據(jù)秒后就能操作了這種方法比第二種方法可以更快處理數(shù)據(jù)。如果請(qǐng)求時(shí)間是依次遞減的那么和方法二效果是一樣在有多個(gè)請(qǐng)求時(shí)這種情況一般不存在。

先上代碼

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, `輸出時(shí)間${new Date() - startTime}毫秒`);
            }
            

輸出

["a在2002毫秒放入", "b在5004毫秒放入", "c在6006毫秒放入"] "輸出時(shí)間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, `輸出時(shí)間${new Date() - startTime}毫秒`);
            }

輸出

["a", "b", "c"] "輸出時(shí)間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, `輸出時(shí)間${new Date() - startTime}毫秒`);
            }

輸出

["a在2003毫秒放入", "b在3001毫秒放入", "c在3001毫秒放入"] "輸出時(shí)間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, `輸出時(shí)間${new Date() - startTime}毫秒`);//results放在最后返回的請(qǐng)求中
              })();
              (async () => {
                dataC = await dataCPromise;
                results.push(`${dataC}在${new Date() - startTime}毫秒放入`);
              })();
            }

輸出

["c在1002毫秒放入", "a在2002毫秒放入", "b在3003毫秒放入"] "輸出時(shí)間3003毫秒"

使用setTimeout模擬了3條異步請(qǐng)求,分別2000,3000,1000毫秒后返回"a", "b", "c",
第一種方法很好理解，就是一步一步執(zhí)行,這種方法適合請(qǐng)求參數(shù)依賴上一個(gè)請(qǐng)求返回值的情況,在這里是不存在這種關(guān)系的,也就是這種方法在這里效率是比較低的。

第二種方法一開(kāi)始就發(fā)起了3個(gè)請(qǐng)求,并等待3請(qǐng)求都到達(dá)后獲取數(shù)據(jù)。

第三種方法也一開(kāi)始就發(fā)起了3個(gè)請(qǐng)求,并在請(qǐng)求到達(dá)后依次執(zhí)行,因?yàn)閍請(qǐng)求到達(dá)時(shí)間是2秒,a請(qǐng)求到達(dá)后,把a(bǔ)的結(jié)果推入results，再往下執(zhí)行,b請(qǐng)求是3秒,b請(qǐng)求遲a請(qǐng)求一秒到達(dá),也就是再過(guò)一秒后把b的結(jié)果推入results,,c的請(qǐng)求是1秒,這個(gè)時(shí)候c早已到達(dá),在這輪循環(huán)末尾可以立即把c推入。a請(qǐng)求返回的數(shù)據(jù)2秒后就能操作了,這種方法比第二種方法可以更快處理數(shù)據(jù)。如果請(qǐng)求時(shí)間是依次遞減的,那么和方法二效果是一樣,在有多個(gè)請(qǐng)求時(shí)這種情況一般不存在。

第四種方法和第三種方法的區(qū)別是最先到達(dá)的請(qǐng)求最快放入結(jié)果集,也就是我不用排隊(duì)等待處理,哪個(gè)數(shù)據(jù)先返回我就先處理哪個(gè)數(shù)據(jù),假如c請(qǐng)求返回的數(shù)據(jù)需要花比較長(zhǎng)的時(shí)間處理,我在一秒后就能開(kāi)始處理了,但是第三種方法我得3秒后才能開(kāi)始處理?？梢钥吹轿野裷esults的輸出放在了b請(qǐng)求到達(dá)的函數(shù)中,因?yàn)閞esults在最后一個(gè)請(qǐng)求到達(dá)后才能完整輸出，與方法三的區(qū)別是獲取結(jié)果的操作也是異步的,這個(gè)很關(guān)鍵，也是和方法三最大的區(qū)別,通過(guò)在外層包裝一個(gè)自執(zhí)行函數(shù),可以防止await的操作權(quán)跳出laucher外部,從而并發(fā)發(fā)起3個(gè)獲取結(jié)果的操作?？赡艽蠹視?huì)有疑問(wèn)假如我不清楚哪個(gè)請(qǐng)求最后到達(dá),那怎么獲取最后的results值,這種情況可以在外面包一個(gè)Promise.all,可以仔細(xì)看一下下面兩個(gè)函數(shù)的區(qū)別

  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, `輸出時(shí)間${new Date() - startTime}毫秒`);
            }

輸出

["a", "b", "c"] "輸出時(shí)間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}毫秒輸出`);
                //這里可以提前處理數(shù)據(jù)
                return data
              }));
              console.log(results);
            }

輸出

c在1002毫秒輸出
a在2003毫秒輸出
b在3003毫秒輸出
["a", "b", "c"] "輸出時(shí)間3004毫秒"

如果請(qǐng)求之間不存在繼發(fā)關(guān)系,并且請(qǐng)求到達(dá)后要執(zhí)行一些運(yùn)算,那么按效率來(lái)說(shuō)
方法4 > 方法3 > 方法2 > 方法1
每種方法都對(duì)應(yīng)一種加載的策略,以一個(gè)使用場(chǎng)景來(lái)說(shuō)明一下，向后臺(tái)加載頁(yè)面組件(假設(shè)組件個(gè)數(shù)是3)
執(zhí)行流程:

方法一: 發(fā)起組件1的請(qǐng)求 -> 組件1數(shù)據(jù)到達(dá)后渲染組件1 -> 發(fā)起組件2的請(qǐng)求 -> 組件2數(shù)據(jù)到達(dá)后渲染組件2 -> 發(fā)起組件3的請(qǐng)求 -> 組件3數(shù)據(jù)到達(dá)后渲染組件3

方法二: 同時(shí)發(fā)起組件1,2,3的請(qǐng)求 -> 組件1,2,3的數(shù)據(jù)都到達(dá)后渲染組件1,2,3

方法三: 同時(shí)發(fā)起組件1,2,3的請(qǐng)求 -> 組件1數(shù)據(jù)到達(dá)后渲染組件1 -> 組件2數(shù)據(jù)到達(dá)后渲染組件2 -> 組件3數(shù)據(jù)到達(dá)后渲染組件3

方法四: 同時(shí)發(fā)起組件1,2,3的請(qǐng)求 -> 最快到達(dá)的組件數(shù)據(jù)到達(dá)后渲染最快到達(dá)的組件 -> 第二快到達(dá)的組件數(shù)據(jù)到達(dá)后渲染第二快到達(dá)的組件 -> 最慢到達(dá)的組件數(shù)據(jù)到達(dá)后渲染最慢到達(dá)的組件

針對(duì)以上場(chǎng)景可以看出方法四可以讓我們的頁(yè)面最快渲染出內(nèi)容

可以看出雖然引入async/await,可以讓你的代碼很精簡(jiǎn),但是async/await本身的執(zhí)行流程卻是很復(fù)雜的,下面的代碼你可以猜一下輸出結(jié)果(補(bǔ)充一點(diǎn):有的文章會(huì)指出forEach函數(shù)不能放入異步操作,這種結(jié)論是錯(cuò)誤的,如果是繼發(fā)關(guān)系確實(shí)不適宜用forEach，但不能表示不能放入異步操作,反而這種操作能提高獲取數(shù)據(jù)的效率)

 [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);