JavaScript - Promise 化

JavaScript 中的 Promise 化

JavaScript 中的 Promise 化是一個將回調函式轉換為返回 Promise 的常規函式的概念。

將回調函式轉換為 Promise 的原因是，當您需要編寫巢狀回撥函式時，會增加程式碼的複雜性。因此，您可以編寫一個返回 Promise 的函式。

在 JavaScript 中，您可以將函式作為另一個函式的引數傳遞，稱為回撥函式。回撥函式用於處理非同步任務。

讓我們首先編寫一個回撥函式的示例。

回撥函式

示例

在下面的程式碼中，我們將回調函式作為 getSum() 函式的最後一個引數傳遞。getSum() 函式在將錯誤和結果總和值作為引數傳遞後呼叫回撥函式。

<html>
<body>
   <div id = "output">The sum of 5 and 10 is: </div>
   <script>
      function getSum(p, q, callback) {   
         let sum = p + q;
         setTimeout(() => callback(null, sum), 100);
      }
      getSum(5, 10, (err, sum) => { // callback function
         document.getElementById("output").innerHTML += sum;
      });
   </script>
</body>
</html>

輸出

The sum of 5 and 10 is: 15

讓我們執行上面示例中討論的回撥函式的 Promise 化。

回撥函式的 Promise 化

示例

讓我們逐步瞭解下面的程式碼。

步驟 1 - 首先，我們建立了 findSum() 函式。它將 p1、p2 和回撥函式作為引數。

步驟 2 - 接下來，findSum() 函式檢查 p1 和 p2 是否有效。如果不是，則透過將錯誤作為引數傳遞來呼叫回撥函式。

步驟 3 - 在其他情況下，它透過將總和和訊息作為引數傳遞來呼叫回撥函式。

步驟 4 - 接下來，我們定義了 promisifyFunc() 函式，它將需要 Promise 化的函式作為引數。

步驟 5 - promisifyFunc() 函式返回該函式，並且該函式返回 Promise。

步驟 6 - 在 Promise 中，我們定義了 callbackFunc() 函式，它根據接收到的引數來解決或拒絕 Promise。

步驟 7 - 接下來，我們將 callbackFunc() 函式插入到 'args' 陣列中，並使用 call() 方法呼叫 'func' 函式，該函式是我們作為 promisifyFunc() 函式的引數接收到的。

步驟 8 - 之後，我們呼叫 promisifyFunc() 函式並將返回的函式儲存在 getSUmPromise() 函式中。

步驟 9 - 當您執行 getSumPromise() 函式時，它會返回 Promise，您可以使用 then() 和 catch() 方法來使用它。

<html>
<body>
   <div id = "output"> </div>
   <script> 
      let output = document.getElementById("output");
      const findSum = (p1, p2, callback) => {
         if (!p1 || !p2) {
            return callback(new Error("Missing dependencies"), null);
         }
         const sum = p1 + p2;
         const msg = 'The sum of numbers is ' + sum;
         return callback(null, sum, msg); // We call the callback function
      }
      function promisifyFunc(func) {
         return (...args) => { // Returning a function
            return new Promise((resolve, reject) => { // Returning a promise
               // Defining a custom callback for the function
               function callbackFunc(err, ...data) {
                  if (err) {
                     return reject(err)
                  }
                  return resolve(data)
               }
               args.push(callbackFunc); // Adding callback function into argument
               func.call(this, ...args); // Calling the findSum() function
            })
         }
      }
      const getSumPromise = promisifyFunc(findSum)
      getSumPromise(5, 10)
      .then((message) => {
         output.innerHTML = message;
      })
      .catch((err) => {
         output.innerHTML = err;
      })
   </script>
</body>
</html>

輸出

15,The sum of numbers is 15

上面的程式碼看起來很複雜，但是如果您使用它來處理巢狀回撥函式，那麼管理它們就會變得容易。在這裡，您可以將自定義回撥函式傳遞到 Promise 內部的特定函式。

列印頁面