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 ได้นำเสนอ Promise องค์ประกอบของ JavaScript

ตารางด้านล่างระบุการเปิดใช้งาน Promise องค์ประกอบในเบราเซอร์ฉบับแรกที่สมบูรณ์

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
กุมภาพันธ์ 2014 กรกฎาคม 2015 เมษายน 2014 กันยายน 2014 มีนาคม 2014