談談JavaScript非同步程式碼優化

勞卜發表於2019-03-02
JavaScript非同步優化

關於

前言

在實際編碼中，我們經常會遇到Javascript程式碼非同步執行的場景，比如ajax的呼叫、定時器的使用等，在這樣的場景下也經常會出現這樣那樣匪夷所思的bug或者糟糕的程式碼片段，那麼處理好你的Javascript非同步程式碼成為了非同步程式設計至關重要的前提。下面我們從問題出發，一步步完善你的非同步程式碼。

非同步問題

1. 回撥地獄

首先，我們來看下非同步程式設計中最常見的一種問題，便是回撥地獄。它的出現是由於非同步程式碼執行時間的不確定性及程式碼間的依賴關係引發的，比如：

// 一個動畫結束後，執行下一個動畫，下一個動畫結束後再執行下一個動畫
$(`#box`).animate({width: `100px`}, 1000, function(){
    $(`#box`).animate({height: `100px`}, 1000, function(){
        $(`#box`).animate({left: 100}, 1000);
    });
});
複製程式碼

由於我們不知道第一個動畫什麼時候開始或者什麼時候結束，所以我們把第二個動畫的執行內容放到了第一個動畫的結束事件裡，把第三個動畫放到了第二個動畫的結束事件裡，這時候如果有很多這樣的動畫，那麼就會形成回撥地獄。

2. 捕獲異常

除了回撥地獄，如果我們需要在非同步程式碼中捕獲異常也比較麻煩，可能需要手動配置捕獲方法:

try {
    throw new Error(`fail`);
} catch (e) {
    console.log(e);
}
複製程式碼

這樣的程式碼書寫明顯不是我們想要的，不僅不利於維護，而且也在一定程度上違背了良好的Javascript編碼規範。

解決方案

那麼我們如何優雅的寫好我們的非同步程式碼呢？我主要列了以下5種常見方案：

1. callback

callback顧名思義便是回撥，但並不是將回撥內容放在非同步方法裡，而是放到外部的回撥函式中，比如問題1的程式碼我們通過callback可以變成這樣：

$(`#box`).animate({width: `100px`}, 1000, autoHeight);

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

function autoLeft() {
    $(`#box`).animate({left: 100}, 1000);
}
複製程式碼

如此我們看似非同步的程式碼變成了同步的寫法，避免了層層巢狀的寫法，看上去也流暢了很多。同時使用callback也是非同步程式設計最基礎和核心的一種解決思路。

2. Promise

基於callback，Promise目前也被廣泛運用，其是非同步程式設計的一種解決方案，比傳統的回撥函式解決方案更合理和強大。相信瞭解ES6的同學肯定不會陌生。

比如我們現在有這樣一個場景，我們需要非同步載入一張圖片，在圖片載入成功後做一些操作，這裡我不想用回撥函式或者將邏輯寫在圖片的成功事件裡，那麼用Promise我們可以這樣寫：

let p = new Promise((resolve, reject) => {
    let img = new Image(); // 建立圖片物件
    
    // 圖片載入成功事件
    img.onload = function() {
        resolve(img); // 輸出圖片物件
    };
    
    // 圖片載入失敗事件
    img.onerror = function() {
        reject(new Error(`load error`)); // 輸出錯誤
    };
    
    img.src = `xxx`; // 圖片路徑
});

// Promise then回撥
p
.then(result => {
    $(`#box`).append(result); // 成功後我們把圖片放到頁面上
})
.catch(error => {
    console.log(error); // 列印錯誤
})
複製程式碼

通過Promise我們把圖片構建載入的邏輯和成功或失敗後的處理邏輯拆分了開來，將回撥函式的巢狀，改成鏈式呼叫，同時使用Promise的catch事件回撥後異常捕獲也變得十分方便。

當然如果要等待多個非同步請求完成執行某些操作，可以使用Promise.all方法，如：

let p = Promise.all([p1, p2, p3]); // 其中p1、p2、p3都是Promise例項

p.then(result => console.log(result));
複製程式碼

當然Promise也有其相應的缺點，比如下一個then回撥只能獲取上一個then返回的資料，不能跨層獲取，同時大量的then回撥也會使程式碼不容易維護。

3. Generator

與Promise一樣，Generator 函式也是 ES6 提供的一種非同步程式設計解決方案，其會返回一個遍歷器物件，非同步任務需要暫停的地方我們可以使用yield語句，比如：

function* getData() {
    let result = yield fetch("xxx"); // 呼叫ajax，yield命令後面只能是 Thunk 函式或 Promise 物件
    
    console.log(result);
}

// 執行
let g = getData();
let result = g.next(); // { value: [object Promise], done: false }

result.value.then(data => {
    return data.json();
}).then(data => {
    g.next(data);
});
複製程式碼

Generator中遇到yield的地方會進行暫停，所以我們需要手動呼叫next方法往下，next返回值的 value 屬性便是我們需要的資料，這裡是fetch方法返回的Promise物件，所以我們需要使用then回撥，最後再呼叫g.next(data)結束並輸出資料。

Generator 函式的缺點在於，我們每一次執行yield語句都需要手動進行next，不是很方便。

4. co

為了解決上方Generator函式需手動執行next方法的問題，TJ Holowaychuk大神編寫了一個co函式庫，能夠使Generator 函式可以自動執行，比如原來我們需要這樣：

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(); // 執行yield
files.next(); // 執行yield
複製程式碼

使用co後：

var co = require(`co`);

co(files);
複製程式碼

co 函式返回一個 Promise 物件，因此可以用 then 方法新增回撥函式。

co(files).then(() => {
  console.log(`執行完成`);
});
複製程式碼

最後我們可以看到我們沒有手動執行next方法，也會列印出所讀取的檔案。

co模組雖然很好的幫助了我們解決了Generator函式必須靠執行器的問題，但是使用起來我們都需要額外引入一個模組，那麼有沒有更加方便的方式來解決呢？繼續往下看。

5. async and await

除了以上4中方式可以解決Javascript非同步程式設計的問題外，ES7還提供了更加方便的async 函式和await命令，瞭解一下？

其實async是 Generator 函式的語法糖，不同點在於其內建了執行器，也就是說async函式自帶執行器。看一下下面的例子：

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 物件和原始型別的值，如果使原始型別最終也會返回為Promise物件
    let b = await p2;
    
    return a + b
}

// async函式的返回值是 Promise 物件， 可以用then方法指定下一步的操作
waitFn().then(result => {
    console.log(result);  // 2s後輸出3
});
複製程式碼

async函式內部return語句返回的值，會成為then方法回撥函式的引數。因此這就像極了利用co包裹起來的Generator函式，只是把*替換成了async，把yield替換成了await。

可以說async and await 是ES7中最重要的一個特性，雖然其也存在一些弊端，但是相比較而言用其處理非同步程式碼來說還是比較得心應手的。

結語

本文簡單介紹了處理好Javascript非同步程式碼的五種常見方式，每一種方式都有其使用和存在的條件和必要性，有興趣的同學可以對其進行單獨的擴充和探究，只有瞭解並掌握每一種方式各自的優點並加以運用，才能享受非同步程式設計帶來的快感。

相關文章