前言
最近,小夥伴S 問了我一段代碼:
const funB = (value) => {
console.log("funB "+ value);
};
const funA = (callback) => {
...
setTimeout(() => {
typeof callback === "function" && callback("is_ok!");
}, 1000);
}
funA(funB);
他不太理解這段代碼中,funB 函數作爲 funA 函數的參數這樣的寫法。從語義上看,callback 的意思是回調,那麼是說 funB 是 funA 的回調嘛?
我給他解釋說,funB 函數的確是 funA 函數的回調,它會等待 funA 中前面的語句都執行完,再去執行。這是一種異步編程的寫法。
小夥伴S 還是有點不太理解。他問:異步編程是什麼?除了回調函數之外,異步編程還有哪些?
別急,讓我們先從概念入手,再逐個理解異步編程中的方法,看看它的前世今生。
什麼是異步?
所謂"異步"(Asynchronous),可以理解爲一種不連續的執行。簡單地說,就是把一個任務分成兩段,先執行第一段,然後轉而執行其他任務,等接到通知了,再回過頭執行第二段。
我們都知道,JavaScript是單線程的。而異步,對於JavaScript的重要性,則體現在非阻塞這一點上。一些常見的異步有:
-
onclick
在其事件觸發的時候,回調會立即添加到任務隊列中。 -
setTimeout
只有當時間到達的時候,纔會將回調添加到任務隊列中。 -
ajax
在網絡請求完成並返回之後,纔將回調添加到任務隊列中。
接下來,我們一起來看看Javascript中的異步編程,具體有哪幾種。
實現異步編程的方法
一、回調函數
上面不止一次提到了回調函數。它從概念上說很簡單,就是把任務的第二段單獨寫在一個函數裏面,等到重新執行這個任務的時候,就直接調用這個函數。它是異步編程中,最基本的方法。
舉個例子,假定有兩個函數 f1 和 f2,後者等待前者的執行結果。順序執行的話,可以這樣寫:
f1();
f2();
但是,如果 f1 是一個很耗時的任務,該怎麼辦?
改寫一下 f1,把 f2 寫成 f1 的回調函數:
const f1 = (callback) => {
setTimeout(() => {
typeof callback === "function" && callback();
}, 1000);
}
f1(f2);
二、事件監聽
onclick 的寫法,在異步編程中,稱爲事件監聽。它的思路是:如果任務的執行不取決於代碼的順序,而取決於某個事件是否發生,也就事件驅動模式。
還是 f1 和 f2 的例子,爲了簡化代碼,這裏採用jQuery的寫法:
// 爲f1綁定一個事件,當f1發生done事件,就執行f2
f1.on('done', f2);
// 改寫f1
function f1(){
setTimeout(() => {
// f1的任務代碼,執行完成後,立即觸發done事件
f1.trigger('done');
}, 1000);
}
它的優點是:比較容易理解,耦合度降低了。可以綁定多個事件,而且每個事件還能指定多個回調函數。
缺點是:整個程序都會變爲由事件來驅動,流程會變得很不清晰。
三、發佈/訂閱
這是一種爲了處理一對多的業務場景而誕生的設計模式,它也是一種異步編程的方法。vue中MVVM的實現,就有它的功勞。
關於概念,我們可以這樣理解,假定存在一個"信號中心",某個任務執行完成,就向信號中心"發佈"(publish)一個信號,其他任務可以向信號中心"訂閱"(subscribe)這個信號,從而知道什麼時候自己可以開始執行。這就叫做"發佈/訂閱模式"(publish-subscribe pattern),又稱"觀察者模式"(observer pattern)。
下面的例子,採用的是 Morgan Roderick 的 PubSubJS ,這是一個無依賴的JavaScript插件:
import PubSub from 'pubsub-js';
// f2向 'PubSub' 訂閱信號 'done'
PubSub.subscribe('done', f2);
const f1 = () => {
setTimeout(() => {
// f1執行完成後,向 'PubSub' 發佈信號 'done',從而執行 f2
PubSub.publish('done');
}, 1000);
};
f1();
// f2 完成執行後,也可以取消訂閱
PubSub.unsubscribe("done", f2);
這種模式有點類似於“事件監聽”,但是明顯優於後者。因爲,我們可以通過查看“消息中心”,瞭解存在多少信號、每個信號有多少訂閱者,從而監控程序的運行。
四、Promise對象
接下來,我們聊聊與ajax相關的異步編程方法,Promise對象。
Promise 是由 CommonJS 提出的一種規範,它是爲了解決回調函數嵌套,也就是回調地獄的問題。它不是新的語法功能,而是一種新的寫法,允許將回調函數的橫向加載,改成縱向加載。它的思想是,每一個異步任務返回一個Promise對象,該對象有一個then方法,允許指定回調函數。
繼續改寫 f1 和 f2:
const f1 = () => {
return new Promise((resolve, reject) => {
let timeOut = Math.random() * 2;
setTimeout(() => {
if (timeOut < 1) {
resolve('200 OK');
} else {
reject('timeout in ' + timeOut + ' seconds.');
}
}, 1000);
});
};
const f2 = () => {
console.log('start f2');
};
f1().then((result) => {
console.log(result);
f2();
}).catch((reason) => {
...
);
例子中,用隨機數模擬了請求的超時。當 f1 返回 Promise 的 resolve 時,執行 f2。
Promise的優點是:回調函數變成了鏈式的寫法,程序的流程可以看得很清楚。還有就是,如果一個任務已經完成,再添加回調函數,該回調函數會立即執行。所以,你不用擔心是否錯過了某個狀態。
缺點就是:編寫和理解,都相對比較難。
五、Generator
generator(生成器)是 ES6 標準引入的數據類型。它最大特點,就是可以交出函數的執行權(即暫停執行),是協程在 ES6 中的實現。
看上去它像一個函數,定義如下:
function* gen(x) {
var y = yield x + 2;
return y;
}
它不同於普通函數,函數名之前要加星號(*
),是可以暫停執行的。
整個 Generator 函數就是一個封裝的異步任務,或者說是異步任務的容器。用 yield 語句註明異步操作需要暫停的地方。
我們來看一下 Generator 函數執行的過程:
var g = gen(1);
// { value: 3, done: false }
g.next();
// { value: undefined, done: true }
g.next();
上面代碼中,調用 Generator 函數,會返回一個內部指針(即遍歷器 )g 。這是 Generator 函數不同於普通函數的另一個地方,即執行它不會返回結果,返回的是指針對象。調用指針 g 的 next 方法,會移動內部指針(即執行異步任務的第一段),指向第一個遇到的 yield 語句,上例是執行到 x + 2 爲止。
換言之,next 方法的作用是分階段執行 Generator 函數。每次調用 next 方法,會返回一個對象,表示當前階段的信息( value 屬性和 done 屬性)。value 屬性是 yield 語句後面表達式的值,表示當前階段的值;done 屬性是一個布爾值,表示 Generator 函數是否執行完畢,即是否還有下一個階段。
六、async/await
這是 ES8 中提出的一種更優雅的異步解決方案,靈感來自於 C# 語言。具體可前往 細說 async/await 相較於 Promise 的優勢 ,深入理解其原理及特性。
來看個例子,要實現一個暫停功能,輸入 N 毫秒,則停頓 N 毫秒後才繼續往下執行。
const sleep = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, time);
})
};
const start = async () => {
console.log('start');
// 在這裏使用起來就像同步代碼那樣直觀
await sleep(1000);
console.log('end');
};
start();
控制檯先輸出 start,稍等 1 秒後,輸出結果 ok,最後輸出 end。
解析一下上述代碼:
- async 表示這是一個async函數,await 只能用在這個函數裏面。
- await 表示在這裏等待 promise 返回了結果,再繼續執行。
- 使用起來,就像寫同步代碼一樣地優雅。
總結
JavaScript的異步編寫方式,從 回調函數 到 async/await,感覺在寫法上,每次都有進步,其本質就是一次次對語言層抽象的優化。以至於現在,我們可以像同步一樣地,去處理異步。
換句話說就是:異步編程的最高境界,就是根本不用關心它是不是異步。
PS:歡迎關注我的公衆號 “超哥前端小棧”,交流更多的想法與技術。