【JavaScript】Promise

FullStackDeveloper 發(fā)布于2019-08-26 12:15 / 3351人閱讀

摘要：對(duì)于這些事件，實(shí)際您并不關(guān)注在添加偵聽(tīng)器之前所發(fā)生的事情。如果圖像元素有一個(gè)返回的方法，我們可以執(zhí)行兩個(gè)特點(diǎn)有點(diǎn)類似于事件偵聽(tīng)器，但有以下兩點(diǎn)區(qū)別只能成功或失敗一次，而不能成功或失敗兩次，也不能從成功轉(zhuǎn)為失敗或從失敗轉(zhuǎn)為成功。

Promise promise 所執(zhí)行的任務(wù)

事件對(duì)于同一對(duì)象上發(fā)生多次的事情（如 keyup、touchstart 等）非常有用。對(duì)于這些事件，實(shí)際您并不關(guān)注在添加偵聽(tīng)器之前所發(fā)生的事情。但是，如果關(guān)系到異步成功/失敗，理想的情況是您希望：

img1.callThisIfLoadedOrWhenLoaded(function() {
  // loaded
}).orIfFailedCallThis(function() {
  // failed
});

// and…
whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
  // all loaded
}).orIfSomeFailedCallThis(function() {
  // one or more failed
});

這就是 promise 所執(zhí)行的任務(wù)。

如果 HTML 圖像元素有一個(gè)返回 promise 的“ready”方法，我們可以執(zhí)行：

img1.ready().then(function() {
  // loaded
}, function() {
  // failed
});

// and…
Promise.all([img1.ready(), img2.ready()]).then(function() {
  // all loaded
}, function() {
  // one or more failed
});

Promise兩個(gè)特點(diǎn)

Promise 有點(diǎn)類似于事件偵聽(tīng)器，但有以下兩點(diǎn)區(qū)別：

1. promise 只能成功或失敗一次，而不能成功或失敗兩次，也不能從成功轉(zhuǎn)為失敗或從失敗轉(zhuǎn)為成功。
2. 如果 promise 已成功或失敗，且您之后添加了成功/失敗回調(diào)，則將會(huì)調(diào)用正確的回調(diào)，即使事件發(fā)生在先。

Promise狀態(tài)

1. A promise is fulfilled if promise.then(f) will call f "as soon as possible."
2. A promise is rejected if promise.then(undefined, r) will call r "as soon as possible."
3. A promise is pending if it is neither fulfilled nor rejected.

創(chuàng)建 promise 的步驟

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

Promise 構(gòu)造函數(shù)包含一個(gè)參數(shù)和一個(gè)帶有 resolve（解析）和 reject（拒絕）兩個(gè)參數(shù)的回調(diào)。在回調(diào)中執(zhí)行一些操作（例如異步），如果一切都正常，則調(diào)用 resolve，否則調(diào)用 reject.

Promise 的使用示例

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

then() 包含兩個(gè)參數(shù)：一個(gè)用于成功情形的回調(diào)和一個(gè)用于失敗情形的回調(diào)。這兩個(gè)都是可選的，因此您可以只添加一個(gè)用于成功情形或失敗情形的回調(diào)。

實(shí)例

啟動(dòng)一個(gè)轉(zhuǎn)環(huán)來(lái)提示加載

獲取一個(gè)故事的 JSON，確定每個(gè)章節(jié)的標(biāo)題和網(wǎng)址

向頁(yè)面中添加標(biāo)題

獲取每個(gè)章節(jié)

向頁(yè)面中添加故事

停止轉(zhuǎn)環(huán)

但如果此過(guò)程發(fā)生錯(cuò)誤，也要向用戶顯示。我們也想在那一點(diǎn)停止轉(zhuǎn)環(huán)，否則，它將不停地旋轉(zhuǎn)、眩暈并撞上其他 UI 控件。

從網(wǎng)絡(luò)中獲取數(shù)據(jù):

對(duì) XMLHttpRequest 執(zhí)行 promise

編寫(xiě)一個(gè)作出 GET 請(qǐng)求的簡(jiǎn)單函數(shù)

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open("GET", url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

使用該功能

get("story.json").then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
})

現(xiàn)在我們無(wú)需手動(dòng)鍵入 XMLHttpRequest 即可作出 HTTP 請(qǐng)求。

返回新值會(huì)改變值

var promise = new Promise(function(resolve, reject) {
  resolve(1);
});

promise.then(function(val) {
  console.log(val); // 1
  return val + 2;
}).then(function(val) {
  console.log(val); // 3
})

異步操作隊(duì)列

可以鏈接多個(gè) then，以便按順序運(yùn)行異步操作。

當(dāng)從 then() 回調(diào)中返回某些內(nèi)容時(shí)，這有點(diǎn)兒神奇。如果返回一個(gè)值，則會(huì)以該值調(diào)用下一個(gè) then()。但是，如果您返回類似于 promise 的內(nèi)容，下一個(gè) then() 則會(huì)等待，并僅在 promise 產(chǎn)生結(jié)果（成功/失敗）時(shí)調(diào)用。例如：

getJSON("story.json").then(function(story) {
  return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
  console.log("Got chapter 1!", chapter1);
})

http://caibaojian.com/promise...
https://github.com/googlesamp...