JavaScript Promise

  • ຫົວຂໍ້ໜ້າໜ້າຫນຶ່ງ JS Async
  • ຫົວຂໍ້ໜ້າໜ້າຫນຶ່ງ JS Async

"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" ຜົນແມ່ນບັນດາອຸປະກອນ error。

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
  • ຫົວຂໍ້ໜ້າໜ້າຫນຶ່ງ JS Async
  • ຫົວຂໍ້ໜ້າໜ້າຫນຶ່ງ JS Async