[ ES6 ] 進(jìn)階篇（一） —— Promise

Charlie_Jade 發(fā)布于2019-08-26 13:27 / 2154人閱讀

摘要：是異步編程的一種解決方案，比傳統(tǒng)的解決方案回調(diào)函數(shù)和事件更合理和更強(qiáng)大。履行意味著操作成功完成。如果不設(shè)置回調(diào)函數(shù)，內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部當(dāng)處于狀態(tài)時(shí)，無(wú)法得知目前進(jìn)展到哪一個(gè)階段剛剛開(kāi)始還是即將完成。

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。

什么是 Promise

從使用上來(lái)說(shuō)是一種語(yǔ)法糖，會(huì)了以后寫(xiě)東西簡(jiǎn)單一些
Promise 翻譯過(guò)來(lái)就是承諾諾言約定答應(yīng) 的意思
那么我是不是可以理解為它答應(yīng)我會(huì)去做某件事，或者約好了會(huì)做某事
注：示例代碼部分使用 jquery 示例

特點(diǎn)

對(duì)象的狀態(tài)不受外界影響

promise 有三個(gè)狀態(tài)：待定(pending)，履行(fulfilled)，拒絕(rejected)。只有返回的結(jié)果可以影響狀態(tài)，其他任何操作不會(huì)影響到這個(gè)狀態(tài)。

//待定：初始狀態(tài)，既未履行也未拒絕。
//履行：意味著操作成功完成。
//拒絕：意味著操作失敗。

就像約會(huì)，說(shuō)好了要約會(huì)，遵守了約定，有其他原因拒絕了約定。只有約會(huì)這件事中的彼此才能決定是遵守還是拒絕，其他人是決定不了的。

狀態(tài)只會(huì)改變一次

Promise對(duì)象的狀態(tài)改變，只有兩種可能：成功(fulfilled)和失敗(rejected);只要改變了就會(huì)一直是這個(gè)結(jié)果。

還是約會(huì)，到了約會(huì)的時(shí)間之后結(jié)果就是肯定的了。別人第二天問(wèn)起昨天約會(huì)去了嗎？也只會(huì)回答去了；或者沒(méi)去。是不可能說(shuō)第一次回答去了，第二次回答沒(méi)去，第三次回答去了又沒(méi)去。

新建 promise 就會(huì)立即執(zhí)行，無(wú)法中途取消。

如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部

當(dāng)處于pending狀態(tài)時(shí)，無(wú)法得知目前進(jìn)展到哪一個(gè)階段（剛剛開(kāi)始還是即將完成）。

參數(shù)

Promise有兩個(gè)參數(shù)名需要傳遞 resolve 和 reject ;分別用來(lái)返回成功和失敗，他們是兩個(gè)函數(shù)，只需要最后調(diào)用一下就行，不用自己去做操作

const promise = new Promise((resolve, reject) => {//約會(huì)定在下午2點(diǎn)
  // 為約會(huì)做準(zhǔn)備

  if (/*到時(shí)間了*/){
    resolve(value);//都來(lái)了 遵守了約定
  } else {
    reject(error);//有事來(lái)不了了 拒絕了約定
  }
});

方法 Promise 原型方法

//原型方法使用方法
Promise.prototype.then();
//實(shí)際用的時(shí)候直接在 Promise 對(duì)象后使用方法的即可
let p = new Promise();
P.then();

then() //之后

它的參數(shù)是回調(diào)函數(shù)，可以有兩個(gè)
第一個(gè)必填，表示成功了會(huì)執(zhí)行的操作；第二個(gè)可以不填，表示失敗了會(huì)執(zhí)行的操作（推薦至少有一個(gè)接收錯(cuò)誤的方法被調(diào)用）

const promise = new Promise((resolve, reject) => {//約會(huì)定在下午2點(diǎn)；新建 Promise 對(duì)象
  // 為約會(huì)做準(zhǔn)備；請(qǐng)求數(shù)據(jù)

  if (/*到時(shí)間了*/){
    resolve(value);//都來(lái)了 遵守了約定；返回成功后的值
  } else {
    reject(error);//有事來(lái)不了了 拒絕了約定；返回失敗的原因
  }
});
promise.then( value => {
  //遵守了約定，兩個(gè)人可以一起做點(diǎn)什么；數(shù)據(jù)操作
}, error => {
  //拒絕了約定，自己一個(gè)人做點(diǎn)什么；顯示錯(cuò)誤信息或者重試
});

catch() //捕獲

它的參數(shù)是一個(gè)回調(diào)函數(shù)，表示失敗了會(huì)執(zhí)行的操作（推薦使用 catch() 接收錯(cuò)誤）

promise.catch( error => {
  //顯示錯(cuò)誤信息或者重試
});

finally() //最后

它的參數(shù)是一個(gè)回調(diào)函數(shù)，表示不管是履行了約定還是拒絕了約定最后都會(huì)執(zhí)行的操作

promise.finally( () => {
  //執(zhí)行完 Promise 后執(zhí)行的操作
});

Promise 對(duì)象方法

//直接使用 Promise 關(guān)鍵字就可以調(diào)用方法
Promise.all();

all()

參數(shù)是 Promise 對(duì)象數(shù)組或者數(shù)組元素返回的都是 Promise 對(duì)象
當(dāng)所有的 Promise 對(duì)象全都返回成功時(shí)，才會(huì)將所有成功的返回值傳遞給 then()
有一個(gè)返回失敗就會(huì)直接結(jié)束當(dāng)前 Promise ,并將第一個(gè)失敗的返回值傳遞給 cath()

假如說(shuō)有一系列數(shù)據(jù)要獲取這時(shí)就可以用 Promise.all()

//獲取 直接用 $.ajax() 是因?yàn)?$.ajax() 實(shí)際上返回的是 Promise 對(duì)象
Promise.all([
    $.ajax({url:"api/userInfo"}),
    $.ajax({url:"api/banner"}),
    $.ajax({url:"api/imagesUrl"})
]).then(arr=>{//全部成功才會(huì)調(diào)用
    let [userInfo1,userInfo2,userInfo3] = arr;
    console.log(userInfo1,userInfo2,userInfo3);
}).catch(err=>{//有一個(gè)失敗就終止并調(diào)用
    console.log(err);
});

reace()

參數(shù)是 Promise 對(duì)象數(shù)組或者數(shù)組元素返回的都是 Promise 對(duì)象
只要有一個(gè)返回了狀態(tài)不論是成功或失敗都會(huì)將值傳遞給 then()

這篇文章主要是自己用來(lái)快速查閱 Promise 相關(guān)語(yǔ)法的，對(duì)于看文檔困難的不推薦看

云服務(wù)器 GPU云服務(wù)器 es6中的promise 進(jìn)階篇 webrtc進(jìn)階信令篇 webrtc進(jìn)階-信令篇

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108848.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Charlie_Jade

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

交友盲盒基本功能介紹

閱讀 1843·2021-10-13 09:39
React造輪子：拖拽排序組件「Dragact」

閱讀 1395·2019-08-30 13:58
前端開(kāi)發(fā)中的基礎(chǔ)思考題

閱讀 1491·2019-08-29 16:42
攜程小程序初體驗(yàn)

閱讀 3625·2019-08-29 15:41
網(wǎng)頁(yè)打印實(shí)踐及參考資料推薦

閱讀 3048·2019-08-29 15:11
overflow-y:auto/hidden/scroll和overflow-x:visible組合

閱讀 2664·2019-08-29 14:10
【前端學(xué)習(xí)】-粗談選擇器

閱讀 3497·2019-08-29 13:29
[ ES6 ] 進(jìn)階篇（一） —— Promise

閱讀 2155·2019-08-26 13:27

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

[ ES6 ] 進(jìn)階篇（一） —— Promise

相關(guān)文章

**前端進(jìn)階資源整理**

ES6入門(mén)到進(jìn)階（二）：循環(huán)、數(shù)組、對(duì)象

ES6-7

**前端進(jìn)階系列-目錄**

前端文檔收集

發(fā)表評(píng)論

0條評(píng)論

Charlie_Jade

男|高級(jí)講師

TA的文章

交友盲盒基本功能介紹

React造輪子：拖拽排序組件「Dragact」

前端開(kāi)發(fā)中的基礎(chǔ)思考題

攜程小程序初體驗(yàn)

網(wǎng)頁(yè)打印實(shí)踐及參考資料推薦

overflow-y:auto/hidden/scroll和overflow-x:visible組合

【前端學(xué)習(xí)】-粗談選擇器