前言

在幾年前，回調(diào)是 JavaScript 中實(shí)現(xiàn)執(zhí)行異步代碼的唯一方法。回調(diào)本身幾乎沒(méi)有什么問(wèn)題，最值得注意的是“回調(diào)地獄”。

在 ES6 中引入了 Promise 作為這些問(wèn)題的解決方案。最后通過(guò)引入   async/await 關(guān)鍵字來(lái)提供更好的體驗(yàn)并提高了可讀性。

即使有了新的方法，但是仍然有許多使用回調(diào)的原生模塊和庫(kù)。在本文中，我們將討論如何將 JavaScript 回調(diào)轉(zhuǎn)換為 Promise。ES6 的知識(shí)將會(huì)派上用場(chǎng)，因?yàn)槲覀儗?huì)使用 展開(kāi)操作符之類的功能來(lái)簡(jiǎn)化要做的事情。

什么是回調(diào)

回調(diào)是一個(gè)函數(shù)參數(shù)，恰好是一個(gè)函數(shù)本身。雖然我們可以創(chuàng)建任何函數(shù)來(lái)接受另一個(gè)函數(shù)，但回調(diào)主要用于異步操作。

JavaScript 是一種解釋性語(yǔ)言，一次只能處理一行代碼。有些任務(wù)可能需要很長(zhǎng)時(shí)間才能完成，例如下載或讀取大文件等。JavaScript 將這些運(yùn)行時(shí)間很長(zhǎng)的任務(wù)轉(zhuǎn)移到瀏覽器或 Node.js 環(huán)境中的其他進(jìn)程中。這樣它就不會(huì)阻止其他代碼的執(zhí)行。

通常異步函數(shù)會(huì)接受回調(diào)函數(shù)，所以完成之后可以處理其數(shù)據(jù)。

舉個(gè)例子，我們將編寫一個(gè)回調(diào)函數(shù)，這個(gè)函數(shù)會(huì)在程序成功從硬盤讀取文件之后執(zhí)行。

所以需要準(zhǔn)備一個(gè)名為 sample.txt 的文本文件，其中包含以下內(nèi)容：

Hello world from sample.txt

然后寫一個(gè)簡(jiǎn)單的 Node.js 腳本來(lái)讀取文件：

const fs = require('fs');

fs.readFile('./sample.txt', 'utf-8', (err, data) => {
  if (err) {
    // 處理錯(cuò)誤
    console.error(err);
     return;
  }
  console.log(data);
});

for (let i = 0; i < 10; i++) {
  console.log(i);
}

運(yùn)行代碼后將會(huì)輸出：

0
...
8
9
Hello world from sample.txt

如果這段代碼，應(yīng)該在執(zhí)行回調(diào)之前看到 0..9 被輸出到控制臺(tái)。這是因?yàn)?JavaScript 的異步管理機(jī)制。在讀取文件完畢之后，輸出文件內(nèi)容的回調(diào)才被調(diào)用。

順便說(shuō)明一下，回調(diào)也可以在同步方法中使用。例如 Array.sort() 會(huì)接受一個(gè)回調(diào)函數(shù)，這個(gè)函數(shù)允許你自定義元素的排序方式。

❝接受回調(diào)的函數(shù)被稱為“高階函數(shù)”。❞

現(xiàn)在我們有了一個(gè)更好的回調(diào)方法。那么們繼續(xù)看看什么是 Promise。

什么是 Promise

在 ECMAScript 2015（ES6）中引入了 Promise，用來(lái)改善在異步編程方面的體驗(yàn)。顧名思義，JavaScript 對(duì)象最終將返回的“值”或“錯(cuò)誤”應(yīng)該是一個(gè) Promise。

一個(gè) Promise 有 3 個(gè)狀態(tài)：

• Pending（待處理）：用來(lái)指示異步操作尚未完成的初始狀態(tài)。
• Fulfilled（已完成）：表示異步操作已成功完成。
• Rejected（拒絕）：表示異步操作失敗。

大多數(shù) Promise 最終看起來(lái)像這樣：

someAsynchronousFunction()
  .then(data => {
    // promise 被完成
    console.log(data);
  })
  .catch(err => {
    // promise 被拒絕
    console.error(err);
  });

Promise 在現(xiàn)代 JavaScript 中非常重要，因?yàn)樗鼈兣c ECMAScript 2016 中引入的 async/await 關(guān)鍵字一起使用。使用 async / await 就不需要再用回調(diào)或 then() 和 catch() 來(lái)編寫異步代碼。

如果要改寫前面的例子，應(yīng)該是這樣：

try {
  const data = await someAsynchronousFunction();
} catch(err) {
  // promise 被拒絕
  console.error(err);
}

這看起來(lái)很像“一般的”同步 JavaScript。大多數(shù)流行的JavaScript庫(kù)和新項(xiàng)目都把 Promises 與 async/await 關(guān)鍵字放在一起用。

但是，如果你要更新現(xiàn)有的庫(kù)或遇到舊的代碼，則可能會(huì)對(duì)將基于回調(diào)的 API 遷移到基于 Promise 的 API 感興趣，這樣可以改善你的開(kāi)發(fā)體驗(yàn)。

來(lái)看一下將回調(diào)轉(zhuǎn)換為 Promise 的幾種方法。

將回調(diào)轉(zhuǎn)換為 Promise

Node.js Promise

大多數(shù)在 Node.js 中接受回調(diào)的異步函數(shù)（例如 fs 模塊）有標(biāo)準(zhǔn)的實(shí)現(xiàn)方式：把回調(diào)作為最后一個(gè)參數(shù)傳遞。

例如這是在不指定文本編碼的情況下用 fs.readFile() 讀取文件的方法：

fs.readFile('./sample.txt', (err, data) => {
  if (err) {
    console.error(err);
     return;
  }
  console.log(data);
});

注意：如果你指定 utf-8 作為編碼，那么得到的輸出是一個(gè)字符串。如果不指定得到的輸出是 Buffer 。

另外傳給這個(gè)函數(shù)的回調(diào)應(yīng)接受 Error ，因?yàn)樗堑谝粋€(gè)參數(shù)。之后可以有任意數(shù)量的輸出。

如果你需要轉(zhuǎn)換為 Promise 的函數(shù)遵循這些規(guī)則，那么可以用 util.promisify ，這是一個(gè)原生 Node.js 模塊，其中包含對(duì) 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);
  });

另外也可以用下面這個(gè)示例中給出的 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)不遵循這個(gè)特定標(biāo)準(zhǔn)也不用擔(dān)心。 util.promisify() 函數(shù)可讓你自定義轉(zhuǎn)換是如何發(fā)生的。

注意：Promise 在被引入后不久就開(kāi)始流行了。Node.js 已經(jīng)將大部分核心函數(shù)從回調(diào)轉(zhuǎn)換成了基于 Promise 的API。

如果需要用 Promise 處理文件，可以用 Node.js 附帶的庫(kù)（https://nodejs.org/docs/latest-v10.x/api/fs.html#fs_fs_promises_api）。

現(xiàn)在你已經(jīng)了解了如何將 Node.js 標(biāo)準(zhǔn)樣式回調(diào)隱含到 Promise 中。從 Node.js 8 開(kāi)始，這個(gè)模塊僅在 Node.js 上可用。如果你用的是瀏覽器或早期版本版本的 Node，則最好創(chuàng)建自己的基于 Promise 的函數(shù)版本。

創(chuàng)建你自己的 Promise

讓我們討論一下怎樣把回調(diào)轉(zhuǎn)為 util.promisify() 函數(shù)的 promise。

思路是創(chuàng)建一個(gè)新的包含回調(diào)函數(shù)的 Promise 對(duì)象。如果回調(diào)函數(shù)返回錯(cuò)誤，就拒絕帶有該錯(cuò)誤的Promise。如果回調(diào)函數(shù)返回非錯(cuò)誤輸出，就解決并輸出 Promise。

先把回調(diào)轉(zhuǎn)換為一個(gè)接受固定參數(shù)的函數(shù)的 promise 開(kāi)始：

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() 接受了用來(lái)讀取 fs.readFile() 文件的兩個(gè)參數(shù)。然后創(chuàng)建一個(gè)新的 Promise 對(duì)象，該對(duì)象包裝了該函數(shù)，并接受回調(diào)，在本例中為 fs.readFile() 。

要 reject Promise 而不是返回錯(cuò)誤。所以代碼中沒(méi)有立即把數(shù)據(jù)輸出，而是先 resolve 了Promise。然后像以前一樣使用基于 Promise 的 readFile() 函數(shù)。

接下來(lái)看看接受動(dòng)態(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);

第一個(gè)參數(shù)是 callback 參數(shù)，這使它在接受回調(diào)的函數(shù)中有點(diǎn)與眾不同。

轉(zhuǎn)換為 promise 的方式和上一個(gè)例子一樣。創(chuàng)建一個(gè)新的 Promise 對(duì)象，這個(gè)對(duì)象包裝使用回調(diào)的函數(shù)。如果遇到錯(cuò)誤，就 reject ，當(dāng)結(jié)果出現(xiàn)時(shí)將會(huì) 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í)，不管函數(shù)是以非標(biāo)準(zhǔn)方式還是帶有許多參數(shù)使用回調(diào)都無(wú)關(guān)緊要。我們可以完全控制它的完成方式，并且原理是一樣的。

盡管現(xiàn)在回調(diào)已成為 JavaScript 中利用異步代碼的默認(rèn)方法，但 Promise 是一種更現(xiàn)代的方法，它更容易使用。如果遇到了使用回調(diào)的代碼庫(kù)，那么現(xiàn)在就可以把它轉(zhuǎn)換為 Promise。

在本文中，我們首先學(xué)到了如何 在Node.js 中使用 utils.promisfy() 方法將接受回調(diào)的函數(shù)轉(zhuǎn)換為 Promise。然后，了解了如何創(chuàng)建自己的 Promise 對(duì)象，并在對(duì)象中包裝了無(wú)需使用外部庫(kù)即可接受回調(diào)的函數(shù)。這樣許多舊 JavaScript 代碼可以輕松地與現(xiàn)代的代碼庫(kù)和混合在一起。

總結(jié)

到此這篇關(guān)于如何將Node.js中的回調(diào)轉(zhuǎn)換為Promise的文章就介紹到這了,更多相關(guān)Node.js的回調(diào)轉(zhuǎn)換為Promise內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論