單線程是Javascript語言最本質的特性之一，Javascript引擎在運行js代碼的時候，同一個時間只能執行單個任務。這種模式的好處是實現起來比較簡單，執行環境相對單純。

壞處是只要有一個任務耗時很長，後面的任務都必須排隊等著，會拖延整個程序的執行。常見的瀏覽器無響應（假死），往往就是因為某一段Javascript代碼長時間運行（比如死循環），導致整個頁面卡在這個地方，其他任務無法執行。

所以非同步編程對JavaScript語言太重要。

有些小夥伴可能還不太理解"非同步"。

所謂的"非同步"，就是一個任務分成兩段，先執行第一段，然後轉而執行其他任務，等做好了準備，再回過頭執行第二段。

例如，有一個任務是讀取文件進行處理，任務的第一段是向操作系統發出請求，要求讀取文件。然後，程序執行其他任務，等到操作系統返迴文件，再接著執行任務的第二段（處理文件）。這種不連續的執行，就叫做非同步。

相應地，連續的執行就叫做同步。由於是連續執行，不能插入其他任務，所以操作系統從硬碟讀取文件的這段時間，程序只能幹等著。

講的通俗點：

朱自清的《背影》中，父親對朱自清說 ：「我買幾個橘子去。你就在此地，不要走動。」

朱自清沒有走動，等著買完橘子的父親一起吃橘子，就叫同步。

如果朱自清沒有等父親，獨自走了，那就不能和父親一起吃橘子，就叫非同步。

1、非同步編程

我們就以用戶註冊這個特別常見的場景為例，講講非同步編程。

第一步，驗證用戶是否註冊

第二步，沒有註冊，發送驗證碼

第三步，填寫驗證碼、密碼，檢驗驗證碼是否正確

這個過程是有一定的順序的，你必須保證上一步完成，才能順利進行下一步。

1.1 回調函數

function testRegister(){} // 驗證用戶是否註冊
function sendMessage(){} // 給手機發送驗證碼x
function testMessage(){} // 檢驗驗證碼是否正確
?
function doRegister(){ //開始註冊
 testRegister(data){
if(data===false){ //已註冊

}else{ //未註冊
 sendMessage(data){
if(data===true){ //發送驗證碼成功
 testMessage(data){
if(data===true){ //驗證碼正確

}else{ //驗證碼不正確

}
}
}
}
}
}
}

代碼中就已經有許多問題，比如雜亂的 if 判斷語句 、層層嵌套的函數，造成代碼的可讀性差，難於維護。另外，如果在層層回調函數中出現異常，調試起來是非常讓人奔潰的 —— 由於 try-catch 無法捕獲非同步的異常，我們只能不斷不斷的寫 debugger 去追蹤，簡直步步驚心。這種層層嵌套被稱為回調地獄。

1.2 Promise方式

Promise就是為了解決回調地獄問題而提出的。它不是新的語法功能，而是一種新的寫法，允許將回調函數的嵌套，改成鏈式調用。採用Promise，連續讀取多個文件，寫法如下。

let state=1; //模擬返回結果
function step1(resolve,reject){
console.log(1. 驗證用戶是否註冊);
if(state==1){
resolve(未註冊);
}else{
reject(已註冊);
}
}
function step2(resolve,reject){
console.log(2.給手機發送驗證碼);
if(state==1){
resolve(發送成功);
}else{
reject(發送失敗);
}
}
function step3(resolve,reject){
console.log(3.檢驗驗證碼是否正確);
if(state==1){
resolve(驗證碼正確);
}else{
reject(驗證碼不正確);
}
}
?
new Promise(testRegister).then(function(val){ // 驗證用戶是否註冊
 console.log(val);
return new Promise(sendMessage); // 給手機發送驗證碼
}).then(function(val){
console.log(val);
return new Promise(testMessage); // 檢驗驗證碼是否正確
}).then(function(val){
console.log(val);
return val;
});

回調函數採用了嵌套的方式依次調用testRegister()、sendMessage() 和testMessage()，而Promise使用then將它們鏈接起來。

相比回調函數而言，Promise代碼可讀性更高，代碼的執行順序一目了然。

Promise的方式雖然解決了回調地獄，但是最大問題是代碼冗餘，原來的任務被Promise 包裝了一下，不管什麼操作，一眼看去都是一堆 then，原來的語義變得很不清楚。代碼流程不能很好的表示執行流程。

大家初中學過電路，這個就像電路的串聯，如果沒學過也沒關係，你肯定知道jquery有鏈式操作，這個就很類似鏈式操作的寫法，比較符合我們的思維邏輯。

1.3 async/await方式

async語法是對new Promise的包裝，await語法是對then方法的提煉。

async function doRegister(url) {
let data = await testRegister(); // 驗證用戶是否註冊
 let data2 = await sendMessage(data); // 給手機發送驗證碼
 let data3 = await testMessage(data2); // 檢驗驗證碼是否正確
 return data3
}

上面的代碼雖然短，但是每一句都極為重要。data 是 await testRegister的返回結果，data2 又使用了 data 作為sendMessage的參數，data3 又使用了data2 作為testMessage的參數。

只要在doRegister前面加上關鍵詞async，在函數內的非同步任務前添加await聲明即可。如果忽略這些額外的關鍵字，簡直就是完完全全的同步寫法。

2、async用法

2.1 返回 Promise 對象

async函數返回一個 Promise 對象。

async函數內部return語句返回的值，會成為then方法回調函數的參數。

async function f() {
return aaa;
}
?
f().then(v => console.log(v))
//aaa
//Promise {<resolved>: undefined}

2.2 await 命令

正常情況下，await命令後面是一個 Promise 對象，返回該對象的結果。如果不是 Promise 對象，就直接返回對應的值。

/*成功情況*/
async function f() {
return await 123;
}
f().then(value => console.log(value)); // 123
/*失敗情況*/
async function f() {
return Promise.reject(error);
}
f().catch(e => console.error(e)); // error

注意事項：

await命令只能用在async函數之中，如果用在普通函數，就會報錯。

/* 錯誤處理 */
function f(db) {
let docs = [1, 2, 3];
for(let doc of docs) {
await db.push(doc);
}
return db; // Uncaught SyntaxError: Unexpected identifier
}

/* 正確處理(順序執行) */
async function f(db) {
let docs = [1, 2, 3];
for(let doc of docs) {
await db.push(doc);
}
return db;
}

2.3 async中異常處理

通過使用 async/await，我們就可以配合 try/catch 來捕獲非同步操作過程中的問題，包括 Promise 中 reject 的數據。

await後面可能存在reject，需要進行try…catch代碼塊中

async function f() {
try {
await Promise.reject(出錯了);
} catch(e) {
console.error(e);
}
return Promise.resolve(hello);
}
f().then(v => console.log(v)); // 出錯了 hello

3、並聯中的await

async/await 語法確實很簡單好用，但也容易使用不當，還要根據具體的業務場景需求來定。

例如我們需要獲取一批圖片的大小信息：

async function allPicInfo (imgs) {
const result = [];
for (const img of imgs) {
result.push(await getSize(img));
}
}

代碼中的每次 getSize 調用都需要等待上一次調用完成，同樣是一種性能浪費，而且花費的時間也長。同樣的功能，用這樣的方式會更合適：

async function allPicInfo (imgs) {
return Promise.all(imgs.map(img => getSize(img)));
}

多個非同步操作，如果沒有繼承關係，最好同時觸發。

4、總結

從最早的回調函數，到 Promise 對象，每次都有所改進，但又讓人覺得不徹底。它們都有額外的複雜性，都需要理解抽象的底層運行機制。

例如有三個請求需要發生，第三個請求是依賴於第二個請求的結果，第二個請求依賴於第一個請求的結果。若用 ES5實現會有3層的回調，導致代碼的橫向發展。若用Promise 實現至少需要3個then，導致代碼的縱向發展。然而，async/await 解決了這些問題。

從實現上來看 async/await 是在 生成器、Promise 基礎上構建出來的新語法：以生成器實現流程式控制制，以 Promise 實現非同步控制。

但是，不要因此小看 async/await，使用同步的方式寫非同步代碼其實非常強大。

async/await 在語義化、簡化代碼、錯誤處理等方面有很多的優勢，畢竟用async/ wait編寫條件代碼要簡單得多，還可以使用相同的代碼結構（眾所周知的try/catch語句）處理同步和非同步錯誤，所以常被稱為JavaScript非同步編程的終極解決方案，可見其重要性和優勢。

希望小伙們在以後的實戰項目中，多多練習，才能掌握async/await的真正精要。


推薦閱讀：
相关文章