返回列表 发帖

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 月

返回列表