“生產程式碼”是可能需要一些時間來執行的程式碼。

“消費程式碼”是必須等待結果的程式碼。

Promise 是一個 JavaScript 物件，它連結生產程式碼和消費程式碼。

看一段最簡單的程式碼：

```javascript
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);
```

執行 new Promise 的建構函式後，會立即進入 Promise 的建構函式體內，即包含了 resolve 和 reject 方法的匿名函式。

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

然後執行完畢。此時並不會執行 then 裡的回撥函式。

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

然後 then 指定的回撥函式被`非同步`呼叫，注意 Chrome 裡的提示：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-gClCUMmg-1660268588108)(https://upload-images.jianshu.io/upload_images/2085791-ceaee127517ade97.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

- 當 Promise 物件處於 `pending`（工作）狀態時，結果是未定義的。

- 當 Promise 物件 `fulfilled` 時，結果是一個值。如下圖所示：

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

- 當 Promise 物件被 `rejected` 時，結果是一個錯誤物件。

開發人員無法訪問 Promise 屬性狀態和結果，必須使用 Promise 方法來處理 Promise。

看一個包含 UI 的例子。

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

Promise 把非同步程式碼封裝起來。上圖的 setTimeout，模擬了一個耗時 3 秒的 HTTP 操作。

返回的 myPromise 物件，使用 then 註冊回撥函式。回撥函式不關心自己什麼時候被呼叫。

執行顯示：

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

3 秒後：

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

一個檔案訪問的例子：

```javascript
let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
```

函式體內一般是一個比較費時的操作，操作本身會立即執行，但什麼時候執行結束？這就是一個非同步操作了。執行結束後，透過 resolve 通知 then 註冊的回撥函式。

JavaScript Promise 的使用技巧

相關文章