[ ES6 ] 進階篇（一） —— Promise

Charlie_Jade 發布于2019-08-26 13:27 / 2086人閱讀

摘要：是異步編程的一種解決方案，比傳統的解決方案回調函數和事件更合理和更強大。履行意味著操作成功完成。如果不設置回調函數，內部拋出的錯誤，不會反應到外部當處于狀態時，無法得知目前進展到哪一個階段剛剛開始還是即將完成。

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。

什么是 Promise

從使用上來說是一種語法糖，會了以后寫東西簡單一些
Promise 翻譯過來就是承諾諾言約定答應的意思
那么我是不是可以理解為它答應我會去做某件事，或者約好了會做某事
注：示例代碼部分使用 jquery 示例

特點

對象的狀態不受外界影響

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

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

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

狀態只會改變一次

Promise對象的狀態改變，只有兩種可能：成功(fulfilled)和失敗(rejected);只要改變了就會一直是這個結果。

還是約會，到了約會的時間之后結果就是肯定的了。別人第二天問起昨天約會去了嗎？也只會回答去了；或者沒去。是不可能說第一次回答去了，第二次回答沒去，第三次回答去了又沒去。

新建 promise 就會立即執行，無法中途取消。

如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部

當處于pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

參數

Promise有兩個參數名需要傳遞 resolve 和 reject ;分別用來返回成功和失敗，他們是兩個函數，只需要最后調用一下就行，不用自己去做操作

const promise = new Promise((resolve, reject) => {//約會定在下午2點
  // 為約會做準備

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

方法 Promise 原型方法

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

then() //之后

它的參數是回調函數，可以有兩個
第一個必填，表示成功了會執行的操作；第二個可以不填，表示失敗了會執行的操作（推薦至少有一個接收錯誤的方法被調用）

const promise = new Promise((resolve, reject) => {//約會定在下午2點；新建 Promise 對象
  // 為約會做準備；請求數據

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

catch() //捕獲

它的參數是一個回調函數，表示失敗了會執行的操作（推薦使用 catch() 接收錯誤）

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

finally() //最后

它的參數是一個回調函數，表示不管是履行了約定還是拒絕了約定最后都會執行的操作

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

Promise 對象方法

//直接使用 Promise 關鍵字就可以調用方法
Promise.all();

all()

參數是 Promise 對象數組或者數組元素返回的都是 Promise 對象
當所有的 Promise 對象全都返回成功時，才會將所有成功的返回值傳遞給 then()
有一個返回失敗就會直接結束當前 Promise ,并將第一個失敗的返回值傳遞給 cath()

假如說有一系列數據要獲取這時就可以用 Promise.all()

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

reace()

參數是 Promise 對象數組或者數組元素返回的都是 Promise 對象
只要有一個返回了狀態不論是成功或失敗都會將值傳遞給 then()

這篇文章主要是自己用來快速查閱 Promise 相關語法的，對于看文檔困難的不推薦看

云服務器 GPU云服務器 es6中的promise 進階篇 webrtc進階信令篇 webrtc進階-信令篇

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

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

前端進階資源整理

摘要：前端進階進階構建項目一配置最佳實踐狀態管理之痛點分析與改良開發中所謂狀態淺析從時間旅行的烏托邦，看狀態管理的設計誤區使用更好地處理數據愛彼迎房源詳情頁中的性能優化從零開始，在中構建時間旅行式調試用輕松管理復雜狀態如何把業務邏輯這個故事講好和前端進階 webpack webpack進階構建項目(一) Webpack 4 配置最佳實踐 react Redux狀態管理之痛點、分析與...

BlackMass 2019-08-23 12:36 評論0 收藏0
ES6入門到進階（二）：循環、數組、對象

摘要：優點按需加載可以寫中路徑也可以動態加以后默認就是嚴格模式，默認嚴格模式完參考視頻資料經典入門到進階上一篇：ES6入門到進階（一）：let、解構賦值、字符串模板、函數一、循環 ES5里面新增一些東西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

JerryZou 2019-08-26 11:47 評論0 收藏0
ES6-7

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

mudiyouyou 2019-08-21 18:40 評論0 收藏0
前端進階系列-目錄

摘要：然而在最近的面試中通過學習和思考，找到了前進的方向，也得到一些大公司的錄用機會。算是從初級前端畢業，進階了吧。在這里先寫個目錄。趕時間的同學可以按照我的目錄先自行準備提升，希望推薦文章和交流。背景之前我分享了文章大廠前端面試考什么?,你們一定很想看答案吧？說實話，答案我是有，在準備面試的時候會時不時翻看，但內容比較多，比較凌亂，不能指望我在一篇文章中寫完。我是從非計算機專業自學前...

cod7ce 2019-08-22 16:12 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0