將JavaScript回調轉換為Promise的方法是什么

小編給大家分享一下將JavaScript回調轉換為Promise的方法是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在幾年前，回調是 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', (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 的函數版本。

創建你自己的 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的方法是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！