JavaScript Promise

"I Promise a Result!"

"Producing code（生產代碼）" 是需要一些時間的代碼

"Consuming code（消費代碼）" 是必須等待結果的代碼

Promise 是一個 JavaScript 對象，它鏈接生成代碼和消費代碼

JavaScript Promise 對象

JavaScript Promise 對象包含生產代碼和對消費代碼的調用：

Promise 語法

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些時間）
  myResolve(); // 成功時
  myReject();  // 出錯時
});
// "Consuming Code" （必須等待一個兌現的承諾）
myPromise.then(
  function(value) { /* 成功時的代碼 */ },
  function(error) { /* 出錯時的代碼 */ }
);

當執行代碼獲得結果時，它應該調用兩個回調之一：

結果 調用
成功 myResolve(result value)
出錯 myReject(error object)

Promise 對象屬性

JavaScript Promise 對象可以是：

  • Pending
  • Fulfilled
  • Rejected

Promise 對象支持兩個屬性：state 和 result。

當 Promise 對象 "pending"（工作）時，結果是 undefined。

當 Promise 對象 "fulfilled" 時，結果是一個值。

當一個 Promise 對象是 "rejected" 時，結果是一個錯誤對象。

myPromise.state myPromise.result
"pending" undefined
"fulfilled" 結果值
"rejected" error 對象

您無法訪問 Promise 屬性 state 和 result。

您必須使用 Promise 方法來處理 Promise。

如何使用 Promise

以下是使用 Promise 的方法：

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() 有兩個參數，一個是成功時的回調，另一個是失敗時的回調。

兩者都是可選的，因此您可以為成功或失敗添加回調。

實例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// 生成代碼（這可能需要一些時間）
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

親自試一試

JavaScript Promise 實例

為了演示 Promise 的使用，我們將使用上一章中的回調實例：

  • 等待超時
  • 等待文件

等待超時

使用回調的例子

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

親自試一試

使用 Promise 的例子

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

親自試一試

等待文件

使用回調的例子

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

親自試一試

使用 Promise 的例子

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

親自試一試

瀏覽器支持

ECMAScript 2015，也稱為 ES6，引入了 JavaScript Promise 對象。

下表注明了首個完全支持 Promise 對象的瀏覽器版本：

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
2014 年 2 月 2015 年 7 月 2014 年 4 月 2014 年 9 月 2014 年 3 月