前言

在幾年前，回撥是 JavaScript 中實現執行非同步程式碼的唯一方法。回撥本身幾乎沒有什麼問題，最值得注意的是“回撥地獄”。

在 ES6 中引入了 Promise 作為這些問題的解決方案。最後通過引入 async/await 關鍵字來提供更好的體驗並提高了可讀性。

即使有了新的方法，但是仍然有許多使用回撥的原生模組和庫。在本文中，我們將討論如何將 JavaScript 回撥轉換為 Promise。ES6 的知識將會派上用場，因為我們將會使用 展開操作符之類的功能來簡化要做的事情。

什麼是回撥

回撥是一個函式引數，恰好是一個函式本身。雖然我們可以建立任何函式來接受另一個函式，但回撥主要用於非同步操作。

JavaScript 是一種解釋性語言，一次只能處理一行程式碼。有些任務可能需要很長時間才能完成，例如下載或讀取大檔案等。JavaScript 將這些執行時間很長的任務轉移到瀏覽器或 Node.js 環境中的其他程序中。這樣它就不會阻止其他程式碼的執行。

通常非同步函式會接受回撥函式，所以完成之後可以處理其資料。

舉個例子，我們將編寫一個回撥函式，這個函式會在程式成功從硬碟讀取檔案之後執行。

所以需要準備一個名為 sample.txt 的文字檔案，其中包含以下內容：

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

如果這段程式碼，應該在執行回撥之前看到 0..9 被輸出到控制檯。這是因為 JavaScript 的非同步管理機制。在讀取檔案完畢之後，輸出檔案內容的回撥才被呼叫。

順便說明一下，回撥也可以在同步方法中使用。例如 Array.sort() 會接受一個回撥函式，這個函式允許你自定義元素的排序方式。

❝接受回撥的函式被稱為“高階函式”。❞

現在我們有了一個更好的回撥方法。那麼們繼續看看什麼是 Promise。

什麼是 Promise

在 ECMAScript 2015（ES6）中引入了 Promise，用來改善在非同步程式設計方面的體驗。顧名思義，JavaScript 物件最終將返回的“值”或“錯誤”應該是一個 Promise。

一個 Promise 有 3 個狀態：

• Pending（待處理）：用來指示非同步操作尚未完成的初始狀態。
• Fulfilled（已完成）：表示非同步操作已成功完成。
• Rejected（拒絕）：表示非同步操作失敗。

大多數 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 的幾種方法。

將回調轉換為 Promise

Node.js Promise

大多數在 Node.js 中接受回撥的非同步函式（例如 fs 模組）有標準的實現方式：把回撥作為最後一個引數傳遞。

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

fs.readFile('./sample.txt',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/latest-v10.x/api/fs.html#fs_fs_promises_api）。

現在你已經瞭解瞭如何將 Node.js 標準樣式回撥隱含到 Promise 中。從 Node.js 8 開始，這個模組僅在 Node.js 上可用。如果你用的是瀏覽器或早期版本版本的 Node，則最好建立自己的基於 Promise 的函式版本。

建立你自己的 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,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,20)
  .then(max => console.log(max));

在建立 promise 時，不管函式是以非標準方式還是帶有許多引數使用回撥都無關緊要。我們可以完全控制它的完成方式，並且原理是一樣的。

儘管現在回撥已成為 JavaScript 中利用非同步程式碼的預設方法，但 Promise 是一種更現代的方法，它更容易使用。如果遇到了使用回撥的程式碼庫，那麼現在就可以把它轉換為 Promise。

在本文中，我們首先學到了如何 在Node.js 中使用 utils.promisfy() 方法將接受回撥的函式轉換為 Promise。然後，瞭解瞭如何建立自己的 Promise 物件，並在物件中包裝了無需使用外部庫即可接受回撥的函式。這樣許多舊 JavaScript 程式碼可以輕鬆地與現代的程式碼庫和混合在一起。

總結

到此這篇關於如何將Node.js中的回撥轉換為Promise的文章就介紹到這了,更多相關Node.js的回撥轉換為Promise內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！