在幾年前,回調是 JavaScript 中實現執行異步代碼的惟一方法。回調自己幾乎沒有什麼問題,最值得注意的是「回調地獄」。javascript
在 ES6 中引入了 Promise 做爲這些問題的解決方案。最後經過引入 async/await
關鍵字來提供更好的體驗並提升了可讀性。html
即便有了新的方法,可是仍然有許多使用回調的原生模塊和庫。在本文中,咱們將討論如何將 JavaScript 回調轉換爲 Promise。 ES6 的知識將會派上用場,由於咱們將會使用 展開操做符之類的功能來簡化要作的事情。前端
回調是一個函數參數,剛好是一個函數自己。雖然咱們能夠建立任何函數來接受另外一個函數,但回調主要用於異步操做。java
JavaScript 是一種解釋性語言,一次只能處理一行代碼。有些任務可能須要很長時間才能完成,例以下載或讀取大文件等。 JavaScript 將這些運行時間很長的任務轉移到瀏覽器或 Node.js 環境中的其餘進程中。這樣它就不會阻止其餘代碼的執行。node
一般異步函數會接受回調函數,因此完成以後能夠處理其數據。程序員
舉個例子,咱們將編寫一個回調函數,這個函數會在程序成功從硬盤讀取文件以後執行。面試
因此須要準備一個名爲 sample.txt
的文本文件,其中包含如下內容:編程
Hello world from sample.txt
而後寫一個簡單的 Node.js 腳原本讀取文件:segmentfault
const fs = require('fs'); fs.readFile('./sample.txt', 'utf-8', (err, data) => { if (err) { // 處理錯誤 console.error(err); return; } console.log(data); }); for (let i = 0; i < 10; i++) { console.log(i); }
運行代碼後將會輸出:api
0 ... 8 9 Hello world from sample.txt
若是這段代碼,應該在執行回調以前看到 0..9
被輸出到控制檯。這是由於 JavaScript 的異步管理機制。在讀取文件完畢以後,輸出文件內容的回調才被調用。
順便說明一下,回調也能夠在同步方法中使用。例如 Array.sort()
會接受一個回調函數,這個函數容許你自定義元素的排序方式。
接受回調的函數被稱爲「高階函數」。
如今咱們有了一個更好的回調方法。那麼們繼續看看什麼是 Promise。
在 ECMAScript 2015(ES6)中引入了 Promise,用來改善在異步編程方面的體驗。顧名思義,JavaScript 對象最終將返回的「值」或「錯誤」應該是一個 Promise。
一個 Promise 有 3 個狀態:
大多數 Promise 最終看起來像這樣:
someAsynchronousFunction() .then(data => { // promise 被完成 console.log(data); }) .catch(err => { // promise 被拒絕 console.error(err); });
Promise 在現代 JavaScript 中很是重要,由於它們與 ECMAScript 2016 中引入的 async/await
關鍵字一塊兒使用。使用 async / await
就不須要再用回調或 then()
和 catch()
來編寫異步代碼。
若是要改寫前面的例子,應該是這樣:
try { const data = await someAsynchronousFunction(); } catch(err) { // promise 被拒絕 console.error(err); }
這看起來很像「通常的」同步 JavaScript。大多數流行的JavaScript庫和新項目都把 Promises 與 async/await
關鍵字放在一塊兒用。
可是,若是你要更新現有的庫或遇到舊的代碼,則可能會對將基於回調的 API 遷移到基於 Promise 的 API 感興趣,這樣能夠改善你的開發體驗。
來看一下將回調轉換爲 Promise 的幾種方法。
大多數在 Node.js 中接受回調的異步函數(例如 fs
模塊)有標準的實現方式:把回調做爲最後一個參數傳遞。
例如這是在不指定文本編碼的狀況下用 fs.readFile()
讀取文件的方法:
fs.readFile('./sample.txt', (err, data) => { if (err) { console.error(err); return; } console.log(data); });
注意:若是你指定 utf-8
做爲編碼,那麼獲得的輸出是一個字符串。若是不指定獲得的輸出是 Buffer
。
另外傳給這個函數的回調應接受 Error
,由於它是第一個參數。以後能夠有任意數量的輸出。
若是你須要轉換爲 Promise 的函數遵循這些規則,那麼能夠用 util.promisify ,這是一個原生 Node.js 模塊,其中包含對 Promise 的回調。
首先導入ʻutil`模塊:
const util = require('util');
而後用 promisify
方法將其轉換爲 Promise:
const fs = require('fs'); const readFile = util.promisify(fs.readFile);
如今,把新建立的函數用做 promise:
readFile('./sample.txt', 'utf-8') .then(data => { console.log(data); }) .catch(err => { console.log(err); });
另外也能夠用下面這個示例中給出的 async/await
關鍵字:
const fs = require('fs'); const util = require('util'); const readFile = util.promisify(fs.readFile); (async () => { try { const content = await readFile('./sample.txt', 'utf-8'); console.log(content); } catch (err) { console.error(err); } })();
你只能在用 async
建立的函數中使用 await
關鍵字,這也是爲何要使用函數包裝器的緣由。函數包裝器也被稱爲當即調用的函數表達式。
若是你的回調不遵循這個特定標準也不用擔憂。 util.promisify()
函數可以讓你自定義轉換是如何發生的。
注意: Promise 在被引入後不久就開始流行了。 Node.js 已經將大部分核心函數從回調轉換成了基於 Promise 的API。
若是須要用 Promise 處理文件,能夠用 Node.js 附帶的庫(https://nodejs.org/docs/lates...)。
如今你已經瞭解瞭如何將 Node.js 標準樣式回調隱含到 Promise 中。從 Node.js 8 開始,這個模塊僅在 Node.js 上可用。若是你用的是瀏覽器或早期版本版本的 Node,則最好建立本身的基於 Promise 的函數版本。
讓咱們討論一下怎樣把回調轉爲 util.promisify()
函數的 promise。
思路是建立一個新的包含回調函數的 Promise 對象。若是回調函數返回錯誤,就拒絕帶有該錯誤的Promise。若是回調函數返回非錯誤輸出,就解決並輸出 Promise。
先把回調轉換爲一個接受固定參數的函數的 promise 開始:
const fs = require('fs'); const readFile = (fileName, encoding) => { return new Promise((resolve, reject) => { fs.readFile(fileName, encoding, (err, data) => { if (err) { return reject(err); } resolve(data); }); }); } readFile('./sample.txt') .then(data => { console.log(data); }) .catch(err => { console.log(err); });
新函數 readFile()
接受了用來讀取 fs.readFile()
文件的兩個參數。而後建立一個新的 Promise 對象,該對象包裝了該函數,並接受回調,在本例中爲 fs.readFile()
。
要 reject
Promise 而不是返回錯誤。因此代碼中沒有當即把數據輸出,而是先 resolve
了Promise。而後像之前同樣使用基於 Promise 的 readFile()
函數。
接下來看看接受動態數量參數的函數:
const getMaxCustom = (callback, ...args) => { let max = -Infinity; for (let i of args) { if (i > max) { max = i; } } callback(max); } getMaxCustom((max) => { console.log('Max is ' + max) }, 10, 2, 23, 1, 111, 20);
第一個參數是 callback 參數,這使它在接受回調的函數中有點不同凡響。
轉換爲 promise 的方式和上一個例子同樣。建立一個新的 Promise 對象,這個對象包裝使用回調的函數。若是遇到錯誤,就 reject
,當結果出現時將會 resolve
。
咱們的 promise 版本以下:
const getMaxPromise = (...args) => { return new Promise((resolve) => { getMaxCustom((max) => { resolve(max); }, ...args); }); } getMaxCustom(10, 2, 23, 1, 111, 20) .then(max => console.log(max));
在建立 promise 時,無論函數是以非標準方式仍是帶有許多參數使用回調都可有可無。咱們能夠徹底控制它的完成方式,而且原理是同樣的。
儘管如今回調已成爲 JavaScript 中利用異步代碼的默認方法,但 Promise 是一種更現代的方法,它更容易使用。若是遇到了使用回調的代碼庫,那麼如今就能夠把它轉換爲 Promise。
在本文中,咱們首先學到了如何 在Node.js 中使用 utils.promisfy()
方法將接受回調的函數轉換爲 Promise。而後,瞭解瞭如何建立本身的 Promise 對象,並在對象中包裝了無需使用外部庫便可接受回調的函數。這樣許多舊 JavaScript 代碼能夠輕鬆地與現代的代碼庫和混合在一塊兒。