“生產(chǎn)代碼”是可能需要一些時(shí)間來執(zhí)行的代碼。

“消費(fèi)代碼”是必須等待結(jié)果的代碼。

Promise 是一個(gè) JavaScript 對(duì)象，它鏈接生產(chǎn)代碼和消費(fèi)代碼。

看一段最簡(jiǎn)單的代碼：

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

執(zhí)行 new Promise 的構(gòu)造函數(shù)后，會(huì)立即進(jìn)入 Promise 的構(gòu)造函數(shù)體內(nèi)，即包含了 resolve 和 reject 方法的匿名函數(shù)。

然后執(zhí)行完畢。此時(shí)并不會(huì)執(zhí)行 then 里的回調(diào)函數(shù)。

然后 then 指定的回調(diào)函數(shù)被異步調(diào)用，注意 Chrome 里的提示：

• 當(dāng) Promise 對(duì)象處于 pending（工作）狀態(tài)時(shí)，結(jié)果是未定義的。
• 當(dāng) Promise 對(duì)象 fulfilled 時(shí)，結(jié)果是一個(gè)值。如下圖所示：

• 當(dāng) Promise 對(duì)象被 rejected 時(shí)，結(jié)果是一個(gè)錯(cuò)誤對(duì)象。

開發(fā)人員無法訪問 Promise 屬性狀態(tài)和結(jié)果，必須使用 Promise 方法來處理 Promise。

看一個(gè)包含 UI 的例子：

Promise 把異步代碼封裝起來。上圖的 setTimeout，模擬了一個(gè)耗時(shí) 3 秒的 HTTP 操作。

返回的 myPromise 對(duì)象，使用 then 注冊(cè)回調(diào)函數(shù)。回調(diào)函數(shù)不關(guān)心自己什么時(shí)候被調(diào)用。

運(yùn)行顯示：

3 秒后：

一個(gè)文件訪問的例子：

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

函數(shù)體內(nèi)一般是一個(gè)比較費(fèi)時(shí)的操作，操作本身會(huì)立即執(zhí)行，但什么時(shí)候執(zhí)行結(jié)束？這就是一個(gè)異步操作了。執(zhí)行結(jié)束后，通過 resolve 通知 then 注冊(cè)的回調(diào)函數(shù)。

到此這篇關(guān)于JavaScript  Promise 的使用技巧的文章就介紹到這了,更多相關(guān)JavaScript Promise 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論