傳統的基於 callback 的實現方式：

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

如果使用 promise，則避免了回撥函式的使用。

新函式 loadScript 不需要回撥。 相反，它將建立並返回一個 Promise 物件，該物件在載入完成時解析。 外部程式碼可以使用 .then 向其新增處理程式（訂閱函式）：

```javascript
function loadScript(src) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = src;

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

document.head.append(script);
  });
}
```

如何使用這個 `loadScript`：

```javascript
let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js");

promise.then(
  script => alert(`${script.src} is loaded!`),
  error => alert(`Error: ${error.message}`)
);

promise.then(script => alert('Another handler...'));
```

使用 Promise 編寫程式碼，允許我們按照自然順序做事。 首先，我們執行 loadScript(script)，然後我們使用類似自然語言的語法 then，編寫如何處理結果。

反觀 callback 解決方案，呼叫 loadScript(script, callback) 時，我們必須有一個回撥函式可供使用。 換句話說，我們必須在呼叫 loadScript 之前知道如何處理結果。

我們可以根據需要多次呼叫 .then 。 每次，我們都會在“訂閱列表”中新增一個新的“粉絲”，一個新的訂閱功能。而 Callback 的解決方案，只支援單個 Callback.

我們如果多次在 executor 裡呼叫 resolve，會發生什麼情形？

比如考慮上述程式碼：

```javascript
let promise = new Promise(function(resolve, reject) {
  resolve(1);

setTimeout(() => resolve(2), 1000);
});

promise.then(alert);
```

答案是 1.

第二次呼叫resolve被忽略，因為只考慮第一次reject/resolve呼叫。 進一步的呼叫將被忽略。

promise 有很多妙用，比如用來實現 delay 函式。

```javascript
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay(3000).then(() => alert('runs after 3 seconds'));
```

delay 的 executor 裡，三秒之後再呼叫 resolve，因而實現了 delay 效果。

請注意，在這個任務中，`resolve` 的寫法，含義是 resolve 被呼叫，沒有引數。 我們不會從延遲中返回任何值，只是確保延遲。

下面是用 promise 實現的一個特效：

```html

<button onclick="go()">Click me</button>

使用 Promise 來改寫 JavaScript 的載入邏輯

相關文章