JavaScript異步函數Promisification處理的方法

這篇文章主要介紹了JavaScript異步函數Promisification處理的方法的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript異步函數Promisification處理的方法文章都會有所收獲，下面我們一起來看看吧。

前言：

Promisification 是一個很長的詞，表示一個編程范式的轉變，即將接受回調的函數轉換為一個返回類型為 Promise 的函數。

我們現實的開發項目中經常需要這種轉換，因為許多函數和庫都是基于回調的，但是 Promise 更方便，所以對它們進行 Promisification 處理是有意義的。

下面是一個簡單的例子：

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`Script load error for ${src}`));

  document.head.append(script);
}

這段代碼，動態創建一個 script 元素，待其加載完畢后，會觸發 onload 事件指定的回調函數。

運行時，loadScript 的調用者，負責指定回調函數：

loadScript('path/script.js', (err, script) => {...})

下面我們將會對這個函數進行 Promisification 改造。

我們將創建一個新函數 loadScriptPromise(src)，它執行相同的操作（加載腳本），但返回一個 Promise 而不是使用回調。

換句話說，我們只傳遞 src （沒有回調）并得到一個 Promise 作為返回參數，當加載成功時使用創建并加載好的 script 進行 resolve，否則通過 reject 拋出錯誤。

改造后的函數：

let loadScriptPromise = function(src) {
  return new Promise((resolve, reject) => {
    loadScript(src, (err, script) => {
      if (err) reject(err);
      else resolve(script);
    });
  });
};

消費代碼：

loadScriptPromise('path/script.js').then(...)

正如我們所見，新函數是原始 loadScript 函數的包裝器。

在實踐中，我們可能需要 Promisify 多個函數，所以構造一個 helper 函數顯得更有意義。

我們稱這個函數為 promisify(f)：它接受一個準備被改造成 Promise 的函數 f， 并返回一個 wrapper 函數。

完整實現如下：

function promisify(f) {
  return function (...args) { // return a wrapper-function (*)
    return new Promise((resolve, reject) => {
      function callback(err, result) { // our custom callback for f (**)
        if (err) {
          reject(err);
        } else {
          resolve(result);
        }
      }
      args.push(callback); // append our custom callback to the end of f arguments

      f.call(this, ...args); // call the original function
    });
  };
}

消費代碼：

let loadScriptPromise = promisify(loadScript);
loadScriptPromise(...).then(...);

關于“JavaScript異步函數Promisification處理的方法”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript異步函數Promisification處理的方法”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。