談談JavaScript異步代碼優化

關於

• 微信公衆號：前端呼啦圈（Love-FED）
• 個人博客：勞卜的博客
• 知乎專欄：前端呼啦圈

前言

在實際編碼中，咱們常常會遇到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]); // 其中p一、p二、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異步代碼的五種常見方式，每一種方式都有其使用和存在的條件和必要性，有興趣的同窗能夠對其進行單獨的拓展和探究，只有瞭解並掌握每一種方式各自的優勢並加以運用，才能享受異步編程帶來的快感。