20170702-異步編程之Promise

gecko23 發布于2019-08-20 17:42 / 1146人閱讀

摘要：異步操作成果異步操作失敗方法可以接受兩個回調函數作為參數。第一個回調函數完成以后，會將返回結果作為參數，傳入第二個回調函數。等同于等同于這段代碼會讓這個對象立即進入狀態，并將錯誤對象傳遞給指定的回調函數。

1.Promise的含義

Promise是異步編程的一種解決方案

Promise實例代表一個異步操作，從它可以獲取異步操作的消息

Promise實例有三種狀態：

Pending：進行中

Resolved：已完成

Rejected：已失敗

Promise實例的狀態只能由 Pending->Resolved， Pending->Rejected。一旦Promise實例的狀態發生改變，就不會再發生變化，任何時候都可以得到這個結果

為什么要使用Promise：通過Promise，可以將一步操作以同步操作的流程表達出來，可以避免層層嵌套的回調函數(回調地域)，并且Promise提供了統一的接口，使得控制異步操作更加容易

2.Promise構造函數

Promise是一個構造函數，用來生成Promise實例

var promise = new Promise(function(resolve, reject)){
    // ... do something
    if (/*異步操作成果*/) {
        resolve(value)
    } else { /*異步操作失敗*/
        reject(error)
    }
}

Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用自己部署。

resolve函數的作用是，將Promise實例的狀態從“未完成”變為“成功”（即從 Pending 變為 Resolved），在異步操作成功時調用，并將異步操作的結果，作為參數傳遞出去

reject函數的作用是，將Promise實例的狀態從“未完成”變為“失敗”（即從 Pending 變為 Rejected），在異步操作失敗時調用，并將異步操作報出的錯誤，作為參數傳遞出去**

Promise.prototype.then()

Promise實例生成以后，可以用then方法分別指定Resolved狀態和Reject狀態的回調函數。

var promise = new Promise(function(resolve, reject)){
    // ... do something
    if (/*異步操作成果*/) {
        resolve(value)
    } else { /*異步操作失敗*/
        reject(error)
    }
}
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受兩個回調函數作為參數。第一個回調函數是Promise的狀態變為Resolved時調用，第二個回調函數是Promise實例的狀態變為Rejected時調用。其中，第二個函數是可選的，不一定要提供。

這兩個函數都接受Promise實例傳出的值作為參數。(簡單地說就是：上面的promise對象在處理異步操作的過程中，如果調用了resolve方法，則會將resolve的參數傳遞給then方法的第一個函數，如果調用了reject方法，這會將reject的參數傳遞給then方法的第二個函數)

then方法返回的是一個新的Promise實例(注意，不是原來那個Promise實例),因此可以采用鏈式寫法，即then方法后面在調用另一個then方法

上面的代碼使用then方法，依次指定了兩個回調函數。第一個回調函數完成以后，會將返回結果作為參數，傳入第二個回調函數。（實際上是第一個then方法返回了一個Promise實例，在該實例中調用了resolve方法，而json.post則是作為resolve的參數）

上面代碼中，第一個then方法指定的回調函數，返回的是另一個Promise實例，則第一個then方法會直接將該Promise實例返回

Promise.prototype.catch()

該方法是.then(undefined, onRejected)的別名，用于指定發生錯誤時的回調函數。

promise.then(function(data) {
    console.log("success");
}).catch(function(error) {
    console.log("error", error);
});

promise對象的錯誤，會一直向后傳遞，直到被捕獲。即錯誤總會被下一個catch所捕獲。then方法指定的回調函數，若拋出錯誤，也會被下一個catch捕獲。catch中也能拋錯，則需要后面的catch來捕獲。

sendRequest("test.html").then(function(data1) {
    //do something
}).then(function (data2) {
    //do something
}).catch(function (error) {
    //處理前面三個Promise產生的錯誤
});

Promise.all()

該方法用于將多個Promise實例，包裝成一個新的Promise實例

// p1,p2,p3都是promise實例
var p = Promise.all([p1, p2, p3]);

新的Promise實例的狀態由三個promise實例共同決定

當三個promise實例的狀態都變為fulfilled，p的狀態才會變為fulfilled，并將三個promise返回的結果，按照參數順序存入數組，傳給p的回調函數

當p1, p2, p3其中之一狀態變為rejected，p的狀態也會變為rejected，并把第一個被reject的promise的返回值，傳給p的回調函數

Promise..race()

該方法用于將多個Promise實例，包裝成一個新的Promise實例

// p1,p2,p3都是promise實例
var p = Promise.race([p1, p2, p3]);

新的Promise實例的狀態由三個promise實例共同決定

當p1, p2, p3其中之一狀態發生改變（變為fulfilled或者rejected），p的狀態也會隨之改變，并把第一個改變狀態的promise的返回值，傳給p的回調函數

Promise.resolve()

Promise.resolve方法的參數分為四種情況

參數是一個Promise實例

如果參數是Promise實例，那么Promise.resolve將不做任何修改、原封不動地返回這個實例。

參數是一個thenable對象

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

Promise.resolve方法會將這個對象轉為Promise對象，然后就立即執行thenable對象的then方法。

參數不是具有then方法的對象，或根本就不是對象

如果參數是一個原始值，或者是一個不具有then方法的對象，則Promise.resolve方法返回一個新的Promise對象，狀態為Resolved。

Promise.resolve("Success");

/*******等同于*******/
new Promise(function (resolve) {
    resolve("Success");
});

不帶任何參數

直接返回一個Resolved狀態的Promise對象。

Promise.resolve("Success");

/*******等同于*******/
new Promise(function (resolve) {
    resolve();
});

Promise.reject()

Promise.reject(new Error("error"));

/*******等同于*******/
new Promise(function (resolve, reject) {
    reject(new Error("error"));
});

這段代碼會讓這個Promise對象立即進入rejected狀態，并將錯誤對象傳遞給then指定的onRejected回調函數。

參考資料

ECMAScript 6 入門

云服務器 GPU云服務器 jquery_promise異步異步編程易語言編程之 python異步編程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83792.html

20170702-異步編程之 async await

摘要：是異步編程的另一種解決方案函數是對函數的改進的基本用法函數函數返回一個實例，可以使用方法為返回的實例添加回調函數。函數內部語句返回的值，會成為方法回調函數的參數。也就是說，只有函數內部的異步操作執行完，才會執行方法指定的回調函數。 async await async await是異步編程的另一種解決方案 async函數是對Generator函數的改進 async的基本用法 asyn...

StonePanda 2019-08-20 17:41 評論0 收藏0
2017-07-03 前端日報

摘要：前端日報精選使用可變數據結構知乎專欄我接觸過的前端數據結構與算法人人網博客基于指令和混合的前端通用埋點方案知乎專欄的數據依賴實現原理簡析從到掘金中文第期升級指南譯是什么鬼知乎專欄異步編程之每日技術筆記的個特性以及對的展 2017-07-03 前端日報精選 Redux 使用可變數據結構 - 知乎專欄我接觸過的前端數據結構與算法 – 人人網FED博客基于指令和混合的前端通用埋點方案 - ...

animabear 2019-08-20 17:42 評論0 收藏0
JS異步編程之Promise

摘要：三是控制反轉控制權在其他人的代碼上，假如異步函數是別人提供的庫，我們把回調函數傳進去，我們并不能知道異步函數在調用回調函數之外做了什么事情。錯誤捕捉相比回調函數的錯誤無法在外部捕捉的問題，能夠為一連串的異步調用提供錯誤處理。前言《JS異步編程之 callback》一文我們了解了JS 是基于單線程事件循環的概念構建的，回調函數不會立即執行，由事件輪詢去檢測事件是否執行完畢，當執行完有...

Hegel_Gu 2019-08-23 15:26 評論0 收藏0
ES6 異步編程之二：Promise

摘要：今天對于處理異步調用已經有了很多成熟的方案，在我看來這些方案都無外乎在解決一個問題如何能看似順序地傳遞異步調用的結果，本文要說的就是原生提供的一個解決方案。在對進行敘述之前，依舊引用阮大的入門一書中的章節便于大家更嚴謹和全面的學習和參考。異步回調的泥潭異步回調是最直接的異步結果處理模式，將一個回調函數callback扔進異步處理函數中，當異步處理獲得結果之后再調用這個回調函數就可以...

Gilbertat 2019-08-21 11:30 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0