JavaScript Promise

"I Promise a Result!"

"Producing code" är kod som kan ta tid

"Consuming code" är kod som måste vänta på ett resultat

Promise är ett JavaScript-objekt som länkar genereringskod och konsumtionskod

JavaScript Promise-objekt

JavaScript Promise-objekt innehåller produktionskod och anrop till konsumtionskod:

Promise-syntaks

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (kan ta tid)
  myResolve(); // Vid framgång
  myReject();  // Vid fel
});
// "Consuming Code" (måste vänta på en löst löfte)
myPromise.then(
  function(value) { /* Kód som körs vid framgång */ },
  function(error) { /* Kód som körs vid fel */ }
);

När kodkörningen får ett resultat, bör den anropa en av två tillbaka-kall.

Resultat Anropa
Lyckat myResolve(result value)
Fel myReject(error object)

Promise-objektattribut

JavaScript Promise-objekt kan vara:

  • Pending
  • Fulfilled
  • Rejected

Ett Promise-objekt stöder två attribut:state och result.

När ett Promise-objekt "pending" (arbetar), är resultatet undefined.

När ett Promise-objekt "fulfilled", är resultatet ett värde.

När ett Promise-objekt är "rejected", är resultatet ett error-objekt.

myPromise.state myPromise.result
"pending" undefined
"fulfilled" Resultatvärde
"rejected" error-objekt

Du kan inte åtkomma Promise-attributen state och result.

Du måste använda Promise-metoder för att hantera Promise.

Hur använder man 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);}
);

Prova själv

JavaScript Promise 实例

为了演示 Promise 的使用，我们将使用上一章中的回调实例：

  • 等待超时
  • 等待文件

等待超时

使用回调的例子

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

Prova själv

使用 Promise 的例子

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

Prova själv

等待文件

使用回调的例子

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

Prova själv

使用 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("Fil inte funnen");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prova själv

Webbläsarstöd

ECMAScript 2015, också känd som ES6, introducerade JavaScript Promise-objekt.

Nedanstående tabell anger den första webbläsarversionen som helt stöder Promise-objekt:

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