前言

在實(shí)際編碼中，我們經(jīng)常會(huì)遇到Javascript代碼異步執(zhí)行的場(chǎng)景，比如ajax的調(diào)用、定時(shí)器的使用等，在這樣的場(chǎng)景下也經(jīng)常會(huì)出現(xiàn)這樣那樣匪夷所思的bug或者糟糕的代碼片段，那么處理好你的Javascript異步代碼成為了異步編程至關(guān)重要的前提。下面我們從問(wèn)題出發(fā)，一步步完善你的異步代碼。

異步問(wèn)題

1. 回調(diào)地獄

首先，我們來(lái)看下異步編程中最常見的一種問(wèn)題，便是回調(diào)地獄。它的出現(xiàn)是由于異步代碼執(zhí)行時(shí)間的不確定性及代碼間的依賴關(guān)系引發(fā)的，比如：

// 一個(gè)動(dòng)畫結(jié)束后，執(zhí)行下一個(gè)動(dòng)畫，下一個(gè)動(dòng)畫結(jié)束后再執(zhí)行下一個(gè)動(dòng)畫$('#box').animate({width: '100px'}, 1000, function(){  $('#box').animate({height: '100px'}, 1000, function(){    $('#box').animate({left: 100}, 1000);  });});

由于我們不知道第一個(gè)動(dòng)畫什么時(shí)候開始或者什么時(shí)候結(jié)束，所以我們把第二個(gè)動(dòng)畫的執(zhí)行內(nèi)容放到了第一個(gè)動(dòng)畫的結(jié)束事件里，把第三個(gè)動(dòng)畫放到了第二個(gè)動(dòng)畫的結(jié)束事件里，這時(shí)候如果有很多這樣的動(dòng)畫，那么就會(huì)形成回調(diào)地獄。

2. 捕獲異常

除了回調(diào)地獄，如果我們需要在異步代碼中捕獲異常也比較麻煩，可能需要手動(dòng)配置捕獲方法:

try {  throw new Error('fail');} catch (e) {  console.log(e);}

這樣的代碼書寫明顯不是我們想要的，不僅不利于維護(hù)，而且也在一定程度上違背了良好的Javascript編碼規(guī)范。

解決方案

那么我們?nèi)绾蝺?yōu)雅的寫好我們的異步代碼呢？我主要列了以下5種常見方案：

1. callback

callback顧名思義便是回調(diào)，但并不是將回調(diào)內(nèi)容放在異步方法里，而是放到外部的回調(diào)函數(shù)中，比如問(wèn)題1的代碼我們通過(guò)callback可以變成這樣：

$('#box').animate({width: '100px'}, 1000, autoHeight);function autoHeight() {  $('#box').animate({height: '100px'}, 1000, autoLeft);}function autoLeft() {  $('#box').animate({left: 100}, 1000);}

如此我們看似異步的代碼變成了同步的寫法，避免了層層嵌套的寫法，看上去也流暢了很多。同時(shí)使用callback也是異步編程最基礎(chǔ)和核心的一種解決思路。

2. Promise

基于callback，Promise目前也被廣泛運(yùn)用，其是異步編程的一種解決方案，比傳統(tǒng)的回調(diào)函數(shù)解決方案更合理和強(qiáng)大。相信了解ES6的同學(xué)肯定不會(huì)陌生。

比如我們現(xiàn)在有這樣一個(gè)場(chǎng)景，我們需要異步加載一張圖片，在圖片加載成功后做一些操作，這里我不想用回調(diào)函數(shù)或者將邏輯寫在圖片的成功事件里，那么用Promise我們可以這樣寫：

let p = new Promise((resolve, reject) => {  let img = new Image(); // 創(chuàng)建圖片對(duì)象  // 圖片加載成功事件  img.onload = function() {    resolve(img); // 輸出圖片對(duì)象  };  // 圖片加載失敗事件  img.onerror = function() {    reject(new Error('load error')); // 輸出錯(cuò)誤  };  img.src = 'xxx'; // 圖片路徑});// Promise then回調(diào)p.then(result => {  $('#box').append(result); // 成功后我們把圖片放到頁(yè)面上}).catch(error => {  console.log(error); // 打印錯(cuò)誤})

通過(guò)Promise我們把圖片構(gòu)建加載的邏輯和成功或失敗后的處理邏輯拆分了開來(lái)，將回調(diào)函數(shù)的嵌套，改成鏈?zhǔn)秸{(diào)用，同時(shí)使用Promise的catch事件回調(diào)后異常捕獲也變得十分方便。

當(dāng)然如果要等待多個(gè)異步請(qǐng)求完成執(zhí)行某些操作，可以使用Promise.all方法，如：

let p = Promise.all([p1, p2, p3]); // 其中p1、p2、p3都是Promise實(shí)例p.then(result => console.log(result));

當(dāng)然Promise也有其相應(yīng)的缺點(diǎn)，比如下一個(gè)then回調(diào)只能獲取上一個(gè)then返回的數(shù)據(jù)，不能跨層獲取，同時(shí)大量的then回調(diào)也會(huì)使代碼不容易維護(hù)。

3. Generator

與Promise一樣，Generator 函數(shù)也是 ES6 提供的一種異步編程解決方案，其會(huì)返回一個(gè)遍歷器對(duì)象，異步任務(wù)需要暫停的地方我們可以使用yield語(yǔ)句，比如：

function* getData() {  let result = yield fetch("xxx"); // 調(diào)用ajax，yield命令后面只能是 Thunk 函數(shù)或 Promise 對(duì)象  console.log(result);}// 執(zhí)行l(wèi)et g = getData();let result = g.next(); // { value: [object Promise], done: false }result.value.then(data => {  return data.json();}).then(data => {  g.next(data);});

Generator中遇到y(tǒng)ield的地方會(huì)進(jìn)行暫停，所以我們需要手動(dòng)調(diào)用next方法往下，next返回值的 value 屬性便是我們需要的數(shù)據(jù)，這里是fetch方法返回的Promise對(duì)象，所以我們需要使用then回調(diào)，最后再調(diào)用g.next(data)結(jié)束并輸出數(shù)據(jù)。

Generator 函數(shù)的缺點(diǎn)在于，我們每一次執(zhí)行yield語(yǔ)句都需要手動(dòng)進(jìn)行next，不是很方便。

4. co

為了解決上方Generator函數(shù)需手動(dòng)執(zhí)行next方法的問(wèn)題，TJ Holowaychuk大神編寫了一個(gè)co函數(shù)庫(kù)，能夠使Generator 函數(shù)可以自動(dòng)執(zhí)行，比如原來(lái)我們需要這樣：

let files = function* (){  var f1 = yield readFile('/xxx/xxx'); // 讀取file1文件  var f2 = yield readFile('/xxx/xxx'); // 讀取file2文件  console.log(f1.toString());  console.log(f2.toString());};files.next(); // 執(zhí)行yieldfiles.next(); // 執(zhí)行yield

使用co后：

var co = require('co');co(files);

co 函數(shù)返回一個(gè) Promise 對(duì)象，因此可以用 then 方法添加回調(diào)函數(shù)。

co(files).then(() => { console.log('執(zhí)行完成');});

最后我們可以看到我們沒(méi)有手動(dòng)執(zhí)行next方法，也會(huì)打印出所讀取的文件。

co模塊雖然很好的幫助了我們解決了Generator函數(shù)必須靠執(zhí)行器的問(wèn)題，但是使用起來(lái)我們都需要額外引入一個(gè)模塊，那么有沒(méi)有更加方便的方式來(lái)解決呢？繼續(xù)往下看。

5. async and await

除了以上4中方式可以解決Javascript異步編程的問(wèn)題外，ES7還提供了更加方便的async 函數(shù)和await命令，了解一下？

其實(shí)async是 Generator 函數(shù)的語(yǔ)法糖，不同點(diǎn)在于其內(nèi)置了執(zhí)行器，也就是說(shuō)async函數(shù)自帶執(zhí)行器。看一下下面的例子：

let p1 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve(1);  }, 1000);});let p2 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve(2);   }, 1000);});async function waitFn() {  let a = await p1; // await命令后面可以是 Promise 對(duì)象和原始類型的值，如果使原始類型最終也會(huì)返回為Promise對(duì)象  let b = await p2;  return a + b}// async函數(shù)的返回值是 Promise 對(duì)象， 可以用then方法指定下一步的操作waitFn().then(result => {  console.log(result); // 2s后輸出3});

async函數(shù)內(nèi)部return語(yǔ)句返回的值，會(huì)成為then方法回調(diào)函數(shù)的參數(shù)。因此這就像極了利用co包裹起來(lái)的Generator函數(shù)，只是把*替換成了async，把yield替換成了await。

可以說(shuō)async and await 是ES7中最重要的一個(gè)特性，雖然其也存在一些弊端，但是相比較而言用其處理異步代碼來(lái)說(shuō)還是比較得心應(yīng)手的。

結(jié)語(yǔ)

本文簡(jiǎn)單介紹了處理好Javascript異步代碼的五種常見方式，每一種方式都有其使用和存在的條件和必要性，有興趣的同學(xué)可以對(duì)其進(jìn)行單獨(dú)的拓展和探究，只有了解并掌握每一種方式各自的優(yōu)點(diǎn)并加以運(yùn)用，才能享受異步編程帶來(lái)的快感。

以上所述是小編給大家介紹的JavaScript異步代碼優(yōu)化詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！