小編給大家分享一下將JavaScript回調(diào)轉(zhuǎn)換為Promise的方法是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計、江城網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、江城網(wǎng)絡(luò)營銷、江城企業(yè)策劃、江城品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們大的嘉獎;成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供江城建站搭建服務(wù),24小時服務(wù)熱線:13518219792,官方網(wǎng)址:www.cdcxhl.com在幾年前,回調(diào)是 JavaScript 中實現(xiàn)執(zhí)行異步代碼的方法?;卣{(diào)本身幾乎沒有什么問題,最值得注意的是“回調(diào)地獄”。
在 ES6 中引入了Promise 作為這些問題的解決方案。最后通過引入 async/await
關(guān)鍵字來提供更好的體驗并提高了可讀性。
即使有了新的方法,但是仍然有許多使用回調(diào)的原生模塊和庫。在本文中,我們將討論如何將 JavaScript 回調(diào)轉(zhuǎn)換為 Promise。 ES6 的知識將會派上用場,因為我們將會使用 展開操作符之類的功能來簡化要做的事情。
回調(diào)是一個函數(shù)參數(shù),恰好是一個函數(shù)本身。雖然我們可以創(chuàng)建任何函數(shù)來接受另一個函數(shù),但回調(diào)主要用于異步操作。
JavaScript 是一種解釋性語言,一次只能處理一行代碼。有些任務(wù)可能需要很長時間才能完成,例如下載或讀取大文件等。 JavaScript 將這些運行時間很長的任務(wù)轉(zhuǎn)移到瀏覽器或 Node.js 環(huán)境中的其他進程中。這樣它就不會阻止其他代碼的執(zhí)行。
通常異步函數(shù)會接受回調(diào)函數(shù),所以完成之后可以處理其數(shù)據(jù)。
舉個例子,我們將編寫一個回調(diào)函數(shù),這個函數(shù)會在程序成功從硬盤讀取文件之后執(zhí)行。
所以需要準(zhǔn)備一個名為sample.txt
的文本文件,其中包含以下內(nèi)容:
Hello world from sample.txt
然后寫一個簡單的 Node.js 腳本來讀取文件:
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); }
運行代碼后將會輸出:
0 ... 8 9 Hello world from sample.txt
如果這段代碼,應(yīng)該在執(zhí)行回調(diào)之前看到0..9
被輸出到控制臺。這是因為 JavaScript 的異步管理機制。在讀取文件完畢之后,輸出文件內(nèi)容的回調(diào)才被調(diào)用。
順便說明一下,回調(diào)也可以在同步方法中使用。例如 Array.sort()
會接受一個回調(diào)函數(shù),這個函數(shù)允許你自定義元素的排序方式。
接受回調(diào)的函數(shù)被稱為“高階函數(shù)”。
現(xiàn)在我們有了一個更好的回調(diào)方法。那么們繼續(xù)看看什么是 Promise。
在 ECMAScript 2015(ES6)中引入了 Promise,用來改善在異步編程方面的體驗。顧名思義,JavaScript 對象最終將返回的“值”或“錯誤”應(yīng)該是一個 Promise。
一個 Promise 有 3 個狀態(tài):
大多數(shù) Promise 最終看起來像這樣:
someAsynchronousFunction() .then(data => { // promise 被完成 console.log(data); }) .catch(err => { // promise 被拒絕 console.error(err); });
Promise 在現(xiàn)代 JavaScript 中非常重要,因為它們與ECMAScript 2016 中引入的async/await
關(guān)鍵字一起使用。使用async / await
就不需要再用回調(diào)或then()
和catch()
來編寫異步代碼。
如果要改寫前面的例子,應(yīng)該是這樣:
try { const data = await someAsynchronousFunction(); } catch(err) { // promise 被拒絕 console.error(err); }
這看起來很像“一般的”同步 JavaScript。大多數(shù)流行的JavaScript庫和新項目都把 Promises 與async/await
關(guān)鍵字放在一起用。
但是,如果你要更新現(xiàn)有的庫或遇到舊的代碼,則可能會對將基于回調(diào)的 API 遷移到基于 Promise 的 API 感興趣,這樣可以改善你的開發(fā)體驗。
來看一下將回調(diào)轉(zhuǎn)換為 Promise 的幾種方法。
大多數(shù)在 Node.js 中接受回調(diào)的異步函數(shù)(例如fs
模塊)有標(biāo)準(zhǔn)的實現(xiàn)方式:把回調(diào)作為最后一個參數(shù)傳遞。
例如這是在不指定文本編碼的情況下用fs.readFile()
讀取文件的方法:
fs.readFile('./sample.txt', (err, data) => { if (err) { console.error(err); return; } console.log(data); });
注意:如果你指定utf-8
作為編碼,那么得到的輸出是一個字符串。如果不指定得到的輸出是Buffer
。
另外傳給這個函數(shù)的回調(diào)應(yīng)接受Error
,因為它是第一個參數(shù)。之后可以有任意數(shù)量的輸出。
如果你需要轉(zhuǎn)換為 Promise 的函數(shù)遵循這些規(guī)則,那么可以用 util.promisify ,這是一個原生 Node.js 模塊,其中包含對 Promise 的回調(diào)。
首先導(dǎo)入?util`模塊:
const util = require('util');
然后用promisify
方法將其轉(zhuǎn)換為 Promise:
const fs = require('fs'); const readFile = util.promisify(fs.readFile);
現(xiàn)在,把新創(chuàng)建的函數(shù)用作 promise:
readFile('./sample.txt', 'utf-8') .then(data => { console.log(data); }) .catch(err => { console.log(err); });
另外也可以用下面這個示例中給出的async/await
關(guān)鍵字:
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
創(chuàng)建的函數(shù)中使用await
關(guān)鍵字,這也是為什么要使用函數(shù)包裝器的原因。函數(shù)包裝器也被稱為立即調(diào)用的函數(shù)表達(dá)式。
如果你的回調(diào)不遵循這個特定標(biāo)準(zhǔn)也不用擔(dān)心。util.promisify()
函數(shù)可讓你自定義轉(zhuǎn)換是如何發(fā)生的。
注意: Promise 在被引入后不久就開始流行了。 Node.js 已經(jīng)將大部分核心函數(shù)從回調(diào)轉(zhuǎn)換成了基于 Promise 的API。
如果需要用 Promise 處理文件,可以用 Node.js 附帶的庫(https://nodejs.org/docs/lates...)。
現(xiàn)在你已經(jīng)了解了如何將 Node.js 標(biāo)準(zhǔn)樣式回調(diào)隱含到 Promise 中。從 Node.js 8 開始,這個模塊僅在 Node.js 上可用。如果你用的是瀏覽器或早期版本版本的 Node,則好創(chuàng)建自己的基于 Promise 的函數(shù)版本。
讓我們討論一下怎樣把回調(diào)轉(zhuǎn)為 util.promisify()
函數(shù)的 promise。
思路是創(chuàng)建一個新的包含回調(diào)函數(shù)的 Promise 對象。如果回調(diào)函數(shù)返回錯誤,就拒絕帶有該錯誤的Promise。如果回調(diào)函數(shù)返回非錯誤輸出,就解決并輸出 Promise。
先把回調(diào)轉(zhuǎn)換為一個接受固定參數(shù)的函數(shù)的 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); });
新函數(shù)readFile()
接受了用來讀取fs.readFile()
文件的兩個參數(shù)。然后創(chuàng)建一個新的 Promise 對象,該對象包裝了該函數(shù),并接受回調(diào),在本例中為fs.readFile()
。
要 reject
Promise 而不是返回錯誤。所以代碼中沒有立即把數(shù)據(jù)輸出,而是先resolve
了Promise。然后像以前一樣使用基于 Promise 的readFile()
函數(shù)。
接下來看看接受動態(tài)數(shù)量參數(shù)的函數(shù):
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);
第一個參數(shù)是 callback 參數(shù),這使它在接受回調(diào)的函數(shù)中有點與眾不同。
轉(zhuǎn)換為 promise 的方式和上一個例子一樣。創(chuàng)建一個新的 Promise 對象,這個對象包裝使用回調(diào)的函數(shù)。如果遇到錯誤,就reject
,當(dāng)結(jié)果出現(xiàn)時將會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));
在創(chuàng)建 promise 時,不管函數(shù)是以非標(biāo)準(zhǔn)方式還是帶有許多參數(shù)使用回調(diào)都無關(guān)緊要。我們可以完全控制它的完成方式,并且原理是一樣的。
以上是“將JavaScript回調(diào)轉(zhuǎn)換為Promise的方法是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!