"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) { /* 出错时的代码 */ });

当执行代码获得结果时，它应该调用两个回调之一：

Promise 对象属性

JavaScript Promise 对象可以是：

• Pending
• Fulfilled
• Rejected

Promise 对象支持两个属性：state 和 result。

当 Promise 对象 "pending"（工作）时，结果是 undefined。

当 Promise 对象 "fulfilled" 时，结果是一个值。

当一个 Promise 对象是 "rejected" 时，结果是一个错误对象。

您无法访问 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 对象的浏览器版本：