關于promise的小結

Tony_Zby 發(fā)布于2019-08-20 17:44 / 1276人閱讀

摘要：則是把類似的異步處理對象和處理規(guī)則進行規(guī)范化，并按照采用統(tǒng)一的接口來編寫，而采取規(guī)定方法之外的寫法都會出錯。這個對象有一個方法，指定回調函數(shù)，用于在異步操作執(zhí)行完后執(zhí)行回調函數(shù)處理。到目前為止，已經(jīng)學習了創(chuàng)建對象和用，方法來注冊回調函數(shù)。

Promise

本文從js的異步處理出發(fā)，引入Promise的概念，并且介紹Promise對象以及其API方法。

js里的異步處理

可以參考這篇文章
js是單線程的，
在js里，異步處理總共有四種方法，其中最常見的一種方法是采用回調函數(shù)的方式

function f1(callback){
    setTimeout(function(){
        callback();
    },1000)
}

f1(f2);

另外除了回調函數(shù)，事件監(jiān)聽的機制也會進行異步處理。任務的執(zhí)行不取決于代碼的順序，而是取決于事件是否會發(fā)生。

如果是業(yè)務邏輯不復雜還好說，可是如果業(yè)務邏輯很復雜的話，回調嵌套的很多，代碼書寫起來會變得很復雜很難看懂。
還有一個問題是，如果有多個異步操作，那么就存在一個處理順序的問題，代碼如何按照希望的順序執(zhí)行。

Promise 簡介

Promise是抽象異步處理對象以及對其進行各種操作的組件。Promise并不是從js里出現(xiàn)的概念。
Promise則是把類似的異步處理對象和處理規(guī)則進行規(guī)范化，并按照采用統(tǒng)一的接口來編寫，而采取規(guī)定方法之外的寫法都會出錯。

首先說，Promise是一個對象，所以說這個對象與js里的其他對象沒什么不一樣的。要說與眾不同的地方時，Promise對象充當代理的作用，充當異步操作和回調函數(shù)之間的中介

Promise的思想是：每次執(zhí)行一個異步操作以后，立刻返回一個Promise對象，因為是立刻操作，所以我們可以進行同步操作流程。這個Promise對象有一個then方法，指定回調函數(shù)，用于在異步操作執(zhí)行完后執(zhí)行回調函數(shù)處理。

//換成Promise的寫法
new Promise(f5).then(f4).then(f3).then(f2).then(f1)

使用Promise，用同步的寫法處理異步操作的代碼，使得代碼清晰易懂，等一個異步函數(shù)處理完成之后，才會執(zhí)行下一個then里邊的函數(shù)。這樣就避免了前邊的多個回調可能引發(fā)的順序問題。

Promise接口

前邊說過，Promise接口的作用是，返回一個Promise對象。
一個Promise對象有三種狀態(tài)

pending 異步操作未完成

resolve 異步操作已成功完成

reject 異步操作失敗

至于這三種關系的途徑可以描述為兩種

pending --->  resolve   
pending --->  reject

這種變化只會出現(xiàn)一次。所以，意思是，一個異步操作結束之后只會有兩種狀態(tài)，成功or失敗。異步操作成功時，Promise對象返回一個值，對象狀態(tài)變?yōu)閞esolve，異步操作失敗時，對象狀態(tài)變?yōu)閞eject。

Promise對象用then方法添加回調函數(shù)，then方法支持鏈式調用。

promise.then(onFulfilled, onRejected)

then方法接受兩個參數(shù)，看名字就知道第一個參數(shù)是Promise對象狀態(tài)時resolve的時候調用，而第二個參數(shù)可以省略，表示Promise調用失敗狀態(tài)是reject的時候執(zhí)行這個回調。

除了then方法，還有一個專門處理異常的方法.
.catch 也可以理解為 promise.then(undefined, onRejected) 。

promise.catch(onRejected)

then和catch兩個方法是寫到了Promise對象的原型上的，每個Promise對象都可以調用。

Promise對象的生成

ES6提供了原生的Promise對象構造函數(shù)，用于生成Promise對象，

var promise = new Promise(function(resolve, reject){
  // 異步操作的代碼

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise對象接收一個函數(shù)作為構造函數(shù)的參數(shù)，這個函數(shù)同樣有兩個參數(shù)，這兩個參數(shù)是由js引擎提供的函數(shù)，不用自己來部署。
resolve函數(shù)的作用是把Promise對象的狀態(tài)從pending變?yōu)閞esolve，在異步操作成功的時候調用，并且將異步操作的結果作為參數(shù)傳過去。同樣的，reject函數(shù)的作用是把對象狀態(tài)從pending變成reject，在失敗的時候調用，并且傳遞結果參數(shù)。

接下來，當Promise對象創(chuàng)建成功之后就可以用then方法鏈式調用了。

Promise對象其他方法

1.Promise.resolve()

一般情況下，我們會用構造函數(shù)的方法創(chuàng)建Promise對象。但是，除此之外我們也會有其他方法創(chuàng)建。
靜態(tài)方法Promise.resolve(value)被認為是new Promise方式創(chuàng)建Promise對象的快捷方式。

Promise.resolve(42).then(function(value){
    console.log(value);
})

resolve()會讓對象狀態(tài)立即變成resolved，并且將形參立刻傳給下一個回調。

2.Promise.reject()

這個方法類似上一個方法，也是創(chuàng)建Promise對象的快捷方式，但是只會把Promise對象從pending變?yōu)閞ejected。參數(shù)是一個異常對象，傳遞給下一個catch方法或者then方法。

Promise.reject(new Error("BOOM!")).catch(function(error){
    console.error(error);
});

3.Promise.all() && Promise.race()

到目前為止，已經(jīng)學習了創(chuàng)建Promise對象和用then，catch方法來注冊回調函數(shù)。如果只有一個Promise對象的話很好說，但是如果有多個Promise對象的時候要如何處理呢。

Promise.all 接收一個 promise對象的數(shù)組作為參數(shù)，當這個數(shù)組里的所有promise對象全部變?yōu)閞esolve或reject狀態(tài)的時候，它才會去調用 .then 方法。

Promise.race 只要有一個promise對象進入 FulFilled 或者 Rejected 狀態(tài)的話，就會繼續(xù)進行后面的處理。

4. 每次調用then都會返回一個新創(chuàng)建的promise對象

function f1(v){
    console.log(v);
    return 2;
}
function f2(v){
    console.log(v)
}
Promise.resolve(1).then(f1).then(f2);

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

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

關于vue、vuex的一些初步小結

摘要：只能是同步函數(shù)，原因是無法捕捉異步函數(shù)的快照。除了這三個概念外，還有類比計算屬性，用于從派生出一些值分割較大的狀態(tài)樹，便于管理。處理表單可手動監(jiān)聽或是使用帶的雙向綁定計算屬性。一、Vue組件的創(chuàng)建一般語法： Vue.component(tagName, options) 務必在根組件實例化之前注冊組件組件options說明： data: 必須是一個函數(shù)，目的在于返回獨立的對象...

joywek 2019-08-21 17:55 評論0 收藏0
2018.11.19秋招末第二波前端實習/校招小結

摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經(jīng)結束招聘崗位不多，投遞對象為大一些的互聯(lián)網(wǎng)公司事件背景第一個入職的是好未來的前端實習崗，待遇工背景個人背景就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習前端方向，自學，vue技術棧時間背景大概是在11月9日準備...

suxier 2019-08-29 17:21 評論0 收藏0
2018.11.19秋招末第二波前端實習/校招小結

摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經(jīng)結束招聘崗位不多，投遞對象為大一些的互聯(lián)網(wǎng)公司事件背景第一個入職的是好未來的前端實習崗，待遇工背景個人背景就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習前端方向，自學，vue技術棧時間背景大概是在11月9日準備...

canger 2019-08-26 13:25 評論0 收藏0
【個人向整理】Promise

摘要：方法而對象本身，有一些方法查看的原型，發(fā)現(xiàn)它內置有幾個方法參數(shù)處理成功的函數(shù)，處理錯誤的函數(shù)返回值返回一個對象，所以可以鏈式調用。參數(shù)返回值的參數(shù)應該是函數(shù)，傳入非函數(shù)則會發(fā)生值穿透。前言網(wǎng)上關于Promise的文章確實是非常多了，但是自己實踐的并不多，這里是針對自己的一個知識點小結和梳理，當然啦如果有錯誤歡迎提出^_^。初定義定義：Promise對象用于一個異步操作的最終完成...

2bdenny 2019-08-26 12:02 評論0 收藏0
我的 2015 年度小結（技術方面）

摘要：因為路由層面受業(yè)務影響很大，經(jīng)常修改一些功能的行為，所以后來大部分測試都是針對層面的單元測試。在我了解的過程中，我發(fā)現(xiàn)中文網(wǎng)絡上對的討論非常分散，于是我創(chuàng)建了中文社區(qū)，到年末已經(jīng)有個注冊用戶和個帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 從 2014 年末開始開發(fā)的一個互聯(lián)網(wǎng)金融項目終于在今年三月份上線了，這是一個 Node...

宋華 2019-08-19 17:35 評論0 收藏0