JavaScript Promise

"I Promise a Result!"

"Producing code (tuotantokoodi)" on koodi, joka saattaa kestää aikaa

"Consuming code (kuluttajakoodi)" on koodi, jonka tulosta odotetaan

Promise on JavaScript-objekti, joka yhdistää tuotantokoodin ja kuluttajakoodin

JavaScriptin Promise-objekti

JavaScriptin Promise-objekti sisältää tuotantokoodia ja kutsuja kuluttajakoodiin:

Promise-grammatiikka

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (saattaa kestää aikaa)
  myResolve(); // Onnistumisen tapauksessa
  myReject();  // Virheen tapauksessa
});
// "Consuming Code" (odotettavaa odotettu lupaus)
myPromise.then(
  function(value) { /* Onnistumisen käsittelyä varten */ },
  function(error) { /* Virheen käsittelyä varten */ }
);

Kun suoritat koodia ja saat tuloksen, se kutsuu yhtä kahdesta paluutoiminnosta:

Tulos Kutsu
Onnistuminen myResolve(tulostusarvo)
Virhe myReject(virheobjekti)

Promise-objektin ominaisuudet

JavaScriptin Promise-objekti voi olla:

  • Pending
  • Fulfilled
  • Rejected

Promise-objekti tukee kahta ominaisuutta:state ja result.

Kun Promise-objekti on "pending" (työskentelee), tuloksena on undefined.

Kun Promise-objekti on "fulfilled", tuloksena on arvo.

Kun Promise-objekti on "rejected", tuloksena on virheobjekti.

myPromise.state myPromise.result
"pending" undefined
"fulfilled" Tulostusarvo
"rejected" error-objekti

Sinulla ei ole pääsyä Promise-ominaisuuksiin state ja result.

Sinun täytyy käyttää Promise-metodia käsitelläksesi Promisea.

Kuinka käyttää Promisea

以下是使用 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);}
);

Kokeile itse

JavaScript Promise 实例

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

  • 等待超时
  • 等待文件

等待超时

使用回调的示例

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

Kokeile itse

Promise 的使用示例

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

Kokeile itse

等待文件

使用回调的示例

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

Kokeile itse

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("Tiedosto ei löydy");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Kokeile itse

Selaimen tuki

ECMAScript 2015, joka tunnetaan myös nimellä ES6, toi mukanaan JavaScriptin Promise-objektit.

Seuraavassa taulukossa on lueteltu ensimmäiset selaimet, jotka tukivat täysin Promise-objekteja:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Vuosi 2014, kuukausi helmikuu Vuosi 2015, kuukausi heinäkuu Vuosi 2014, kuukausi huhtikuu Vuosi 2014, kuukausi syyskuu Vuosi 2014, kuukausi maaliskuu