【JavaScript】Promise

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

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

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

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

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

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

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

如果 HTML 圖像元素有一個返回 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兩個特點

Promise 有點類似于事件偵聽器，但有以下兩點區(qū)別：

1. promise 只能成功或失敗一次，而不能成功或失敗兩次，也不能從成功轉(zhuǎn)為失敗或從失敗轉(zhuǎn)為成功。
2. 如果 promise 已成功或失敗，且您之后添加了成功/失敗回調(diào)，則將會調(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ù)包含一個參數(shù)和一個帶有 resolve（解析）和 reject（拒絕）兩個參數(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() 包含兩個參數(shù)：一個用于成功情形的回調(diào)和一個用于失敗情形的回調(diào)。這兩個都是可選的，因此您可以只添加一個用于成功情形或失敗情形的回調(diào)。

實例

啟動一個轉(zhuǎn)環(huán)來提示加載

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

向頁面中添加標題

獲取每個章節(jié)

向頁面中添加故事

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

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

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

對 XMLHttpRequest 執(zhí)行 promise

編寫一個作出 GET 請求的簡單函數(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)在我們無需手動鍵入 XMLHttpRequest 即可作出 HTTP 請求。

返回新值會改變值

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

異步操作隊列

可以鏈接多個 then，以便按順序運行異步操作。

當從 then() 回調(diào)中返回某些內(nèi)容時，這有點兒神奇。如果返回一個值，則會以該值調(diào)用下一個 then()。但是，如果您返回類似于 promise 的內(nèi)容，下一個 then() 則會等待，并僅在 promise 產(chǎn)生結(jié)果（成功/失?。r調(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...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108337.html

JavaScript引擎是如何工作的？從調(diào)用棧到Promise你需要知道的一切

摘要：最受歡迎的引擎是，在和中使用，用于，以及所使用的。怎么處理每個引擎都有一個基本組件，稱為調(diào)用棧。也就是說，如果有其他函數(shù)等待執(zhí)行，函數(shù)是不能離開調(diào)用棧的。每個異步函數(shù)在被送入調(diào)用棧之前必須通過回調(diào)隊列。例如方法是在中傳遞的回調(diào)函數(shù)。 ? 翻譯：瘋狂的技術宅原文：www.valentinog.com/blog/engine… 從Call Stack，Global Me...

zzbo 2019-06-18 11:16 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規(guī)范并可配合使用的寫一個符合規(guī)范并可配合使用的理解的工作原理采用回調(diào)函數(shù)來處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸問題描述在開發(fā)過程中，遇到一個需求：在系統(tǒng)初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
JavaScript引擎是如何工作的？從調(diào)用棧到Promise你需要知道的一切

摘要：最受歡迎的引擎是，在和中使用，用于，以及所使用的。單線程的我們說是單線程的，因為有一個調(diào)用棧處理我們的函數(shù)。也就是說，如果有其他函數(shù)等待執(zhí)行，函數(shù)是不能離開調(diào)用棧的。每個異步函數(shù)在被送入調(diào)用棧之前必須通過回調(diào)隊列。翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... 本文首發(fā)微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的前端技術文章 sh...

Simon_Zhou 2019-08-26 13:49 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經(jīng)有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
異步 JavaScript 與 Promise

摘要：為這些回調(diào)函數(shù)分別命名并分離存放可以在形式上減少嵌套，使代碼清晰，但仍然不能解決問題。如果在一個結(jié)束成功或失敗，同前面的說明后，添加針對成功或失敗的回調(diào)，則回調(diào)函數(shù)會立即執(zhí)行。異步？我在很多地方都看到過異步(Asynchronous)這個詞，但在我還不是很理解這個概念的時候，卻發(fā)現(xiàn)自己常常會被當做已經(jīng)很清楚(*￣?￣)。如果你也有類似的情況，沒關系，搜索一下這個詞，就可以得到大致...

livem 2019-08-21 10:26 評論0 收藏0
javascript異步之Promise.all()、Promise.race()、Promise.

摘要：的執(zhí)行與狀態(tài)無關當?shù)玫綘顟B(tài)不論成功或失敗后就會執(zhí)行，原文鏈接參考鏈接對象同期異步系列文章推薦談一談javascript異步javascript異步中的回調(diào)javascript異步與promisejavascript異步之Promise.resolve()、Promise.reject()javascript異步之Promise then和catchjavascript異步之a(chǎn)sync...

clasnake 2019-08-23 14:53 評論0 收藏0