認識 JS Promise

JavaScript Promise

Word count: 467Reading time: 2 min

 2023/04/16 

Constructor

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

promise1.then((value) => {
  console.log(value);
  // Expected output: "foo"
});

console.log(promise1);
// Expected output: [object Promise]

Syntax

new Promise(executor) 

// or 可以表示

new Promise( /* executor */ function(resolve, reject) { ... } );

Parameter

executor

為一個function，接收兩個參數(function)，resovle及rejects，通常executor會發起一些非同步操作，接著，成功完成後會執行resolve；如果錯誤，執行rejects。

Untitled

為什麼要使用Promise

有個常見的需求是依序呼叫兩個以上的非同步函數，因為多數非同步函數都有callback，如果非同步函數一個接一個，那就會很恐怖。

主要原因是避免波動拳(Pyramid of Doom)

Untitled

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

但如果用Promise

doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);

看起來就會簡潔多了

基本規則

一個Promise物件處於3種狀態

pending (擱置)
fulfilled (實現)
rejected (拒絕)

Promise狀態只能從pending → fulfilled ，或是pending → rejected
一旦狀態確定，就不能再更改
當狀態發生轉變，就會調用透過then方法傳入的function

then

Promise物件有then方法，then是定義在原型物件Promise.prototype上的，他的作用是當Promise狀態改變時的回調函數(callback)，當非同步操作成功時，執行resolve，失敗則執行rejected。

其他Promise原型定義方法 👇

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise#promise_原型

實際範例

Ajax+promise的應用:

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

https://juejin.cn/post/6936886197817966606

https://github.com/YvetteLau/Blog/issues/2

Next Post

Promise chain 鏈| 為什麼會有兩次then?
Previous Post

XML 是什麼?

CATALOG

1. Constructor
2. Syntax
3. Parameter
4. 為什麼要使用Promise
5. 基本規則
6. then
7. 實際範例
8. 參考資料