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);
}

這段代碼，動態(tài)創(chuàng)建一個 script 元素，待其加載完畢后，會觸發(fā) onload 事件指定的回調(diào)函數(shù)。

運行時，loadScript 的調(diào)用者，負(fù)責(zé)指定回調(diào)函數(shù)：

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

下面我們將會對這個函數(shù)進(jìn)行 Promisification 改造。

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

換句話說，我們只傳遞 src （沒有回調(diào)）并得到一個 Promise 作為返回參數(shù)，當(dāng)加載成功時使用創(chuàng)建并加載好的 script 進(jìn)行 resolve，否則通過 reject 拋出錯誤。

改造后的函數(shù)：

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(...)

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

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

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

完整實現(xiàn)如下：

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(...);

到此這篇關(guān)于JavaScript 異步函數(shù) Promisification 處理詳情的文章就介紹到這了,更多相關(guān)JavaScript Promisification 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: