我開發了一個函式 loadScript，可以動態載入指定的本地 JavaScript 檔案。
原始碼如下：

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

然後開發一個函式 `promisify`，可以將任意傳遞進來的函式 f，改造成返回引數型別為 Promise 的新函式。

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

具體的消費方式：

```javascript
let loadScriptPromise = promisify(loadScript);
loadScriptPromise("1.js").then((script) => { console.log('loaded:', script); hello();});
```

其中 1.js 的內容：

```javascript
function hello(){
	console.log("hello!");
}
```

下面我們進行單步除錯。

待改造的 loadScript，包含兩個函式：

![](https://img-blog.csdnimg.cn/img_convert/278a5b65e06cda20a035c05522d28cbd.png)

呼叫 promisify，返回一個新的函式。

![](https://img-blog.csdnimg.cn/img_convert/21a37e47603849911800da5a8aac9318.png)

這個新的函式包含一個閉包 f，可以呼叫沒有 promisify 之前的舊函式。

![](https://img-blog.csdnimg.cn/img_convert/8502d43adce50abedbfb05f64f763e43.png)

使用這個新函式載入 1.js：
![](https://img-blog.csdnimg.cn/img_convert/e4329f1577aba3f01c208586829c4ffa.png)

進入這個新函式內部，執行 executor body：
![](https://img-blog.csdnimg.cn/img_convert/48224f26a2afc68ef1c2c3724ccbe595.png)

在函式體內部可以隨時訪問 callback：
![](https://img-blog.csdnimg.cn/img_convert/0fe43ef791d5fc3252389faeb989dd1a.png)

我們期望 script onload 事件發生時，會使用 Promise 自帶的 resolve 和 reject 傳遞引數，因此自己編寫了一個 callback 函式，在這個 callback 函式里，使用 Promise 的 resolve 投遞結果。

並且期望將這個 callback 函式，傳遞給原始的 loadScript 函式內部。我們透過 `function` 原型鏈上的 call 函式，就達到了呼叫原始的 loadScript 函式的目的。

![](https://img-blog.csdnimg.cn/img_convert/34188060b4ea3ebcc38ec146ba058c9a.png)

並且此時的 callback 函式，確實是我們在 promisify 函式內編寫的使用 Promise resolve 傳遞結果的函式。

![](https://img-blog.csdnimg.cn/img_convert/bc6fae89380092b6b5f7861f0c29df27.png)

稍後，script.onload 非同步觸發：
![](https://img-blog.csdnimg.cn/img_convert/448e42386f6f53909dc3f633ce6bfd81.png)

透過 resolve，將載入完畢的 script 元素，傳遞給 promise 物件透過 then 註冊的回撥函式。

![](https://img-blog.csdnimg.cn/img_convert/e54d653aa946056b8be4bf498562ef0b.png)

![](https://img-blog.csdnimg.cn/img_convert/1e8f26d7f3a6ef2eb9fc26c3a0a174ea.png)

將使用回撥函式作為引數的函式改造為返回 Promise 的一個具體例子

相關文章