js之Promise使用

關于Promise對象的使用,這里我直接引入阮一峰老師的一段話。

Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調函數(shù)和事件——更合理和更強大。它由社區(qū)最早提出和實現(xiàn),ES6 將其寫進了語言標準,統(tǒng)一了用法,原生提供了Promise對象。
所謂Promise,簡單說就是一個容器,里面保存著某個未來才會結束的事件(通常是一個異步操作)的結果。從語法上說,Promise 是一個對象,從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API,各種異步操作都可以用同樣的方法進行處理。
Promise對象有以下兩個特點。
(1)對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作,有三種狀態(tài):pending(進行中)、fulfilled(已成功)和rejected(已失敗)。只有異步操作的結果,可以決定當前是哪一種狀態(tài),任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。
(2)一旦狀態(tài)改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態(tài)改變,只有兩種可能:從pending變?yōu)?code>fulfilled和從pending變?yōu)?code>rejected。只要這兩種情況發(fā)生,狀態(tài)就凝固了,不會再變了,會一直保持這個結果,這時就稱為 resolved(已定型)。如果改變已經發(fā)生了,你再對Promise對象添加回調函數(shù),也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監(jiān)聽,是得不到結果的。
有了Promise對象,就可以將異步操作以同步操作的流程表達出來,避免了層層嵌套的回調函數(shù)。此外,Promise對象提供統(tǒng)一的接口,使得控制異步操作更加容易。
Promise也有一些缺點。首先,無法取消Promise,一旦新建它就會立即執(zhí)行,無法中途取消。其次,如果不設置回調函數(shù),Promise內部拋出的錯誤,不會反應到外部。第三,當處于pending狀態(tài)時,無法得知目前進展到哪一個階段(剛剛開始還是即將完成)。
如果某些事件不斷地反復發(fā)生,一般來說,使用 Stream 模式是比部署Promise更好的選擇。

ES6標準中,正式引入Promise對象,使用Promise對象可以避免回掉函數(shù)的層層嵌套,避免回調地獄,另一方面大大增加js代碼的可讀性。
這里我們就來實戰(zhàn)使用以下Promise對象。


// 創(chuàng)建一個Promise對象,ES6 規(guī)定,Promise對象是一個構造函數(shù),用來生成Promise實例。

const promise = new Promise((resovle,reject) => {
    if(/*異步操作成功*/){
        resovle(/*異步操作成功,需要返回的數(shù)據*/)
    } else {
        reject(/*異步操作失敗,需要返回的數(shù)據*/)
    }
})

上面的代碼就是創(chuàng)建一個Promise對象。Promise構造函數(shù)接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是resolve和reject。它們是兩個函數(shù),由 JavaScript 引擎提供的。resolve函數(shù)的作用是將Promise對象由pending狀態(tài)轉化為fulfilled,而reject函數(shù)的作用是將Promise對象由pending狀態(tài)轉化為rejected,通常用來拋出異步錯誤導致的異常(當然也可以拋出自己定義的業(yè)務邏輯異常,而不僅僅是異步操作異常)。

Promise一經創(chuàng)建就會被執(zhí)行,Promise提供then()方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調函數(shù)。示例如下:

promise.then(data => {
    /* data 返回的是resovle中所傳回的數(shù)據 */

},err => {
    /* err 返回的是reject中所拋出的數(shù)據 */
})

then方法可以接受兩個回調函數(shù)作為參數(shù)。第一個回調函數(shù)是Promise對象的狀態(tài)變?yōu)閞esolved時調用,第二個回調函數(shù)是Promise對象的狀態(tài)變?yōu)閞ejected時調用。其中,第二個函數(shù)是可選的,不一定要提供。

而通常,我們更習慣將rejected狀態(tài)所拋出的數(shù)據,用catch()方法捕獲。所以推薦使用下面的寫法。


promise.then(data => {
      /* data 返回的是resovle中所傳回的數(shù)據 */
}).catch(err => {
  /* err 返回的是reject中所拋出的數(shù)據 */
})

接下來我們看一個完整的使用例子:


image.png

上面的一個例子是Promise的一個簡單實用,而Promise真正的威力在于多個promise對象的鏈式寫法。如果我們希望我們的js按照一定流程執(zhí)行,那么Promise將是一個很好的選擇(比起callback嵌套)。示例如下


image.png

通過上面的例子,我們可以看到Promise在異步操作的流程控制方面方便了許多,但是實際情況,有時候我們并不知道到底是異步,還是同步操作,因此捕獲異常就變得困難了。所以Promise.try()閃亮登場 詳細介紹 http://jdc.jd.com/archives/1704
由于我這邊開發(fā)環(huán)境使用的node.js 并不支持Promise.try()方法,需要額外引入es6-promise-try這個模塊。

cnpm install --save-dev es6-promise-try

代碼如下:

const promiseTry = require("es6-promise-try");

let tongbu = Math.random()*2
let f1 = (resolve, reject) => {
    
    if(Math.random()*2>1){
        resolve('NO1執(zhí)行成功')
    }else {
        reject('NO1執(zhí)行失敗')
    }
}
    
promiseTry(()=>{
    if(tongbu<1){
        throw '同步錯誤'
    }
   return new Promise(f1)
}).then(data =>{data
    console.log(data)
}).catch(err =>{
    console.log(`執(zhí)行中遇到的錯誤:${err}`)
})

image.png

上面是示例可以看出使用Promise.try()之后,我們可以用catch捕獲你代碼中throw的錯誤,還有Promise對象中reject()的錯誤。這樣的場景經常會出現(xiàn)我們在調用第三方模塊的時候,因為你并不知道該模塊會拋出什么樣的錯誤,這時候Promise.try()就顯得尤為重要。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調函...
    neromous閱讀 8,823評論 1 56
  • Promiese 簡單說就是一個容器,里面保存著某個未來才會結束的事件(通常是一個異步操作)的結果,語法上說,Pr...
    雨飛飛雨閱讀 3,484評論 0 19
  • Promise對象是一種解決異步問題的方法,還有的解決方案是asyns 和 await (es7) 這么是目前的終...
    站在大神的肩膀上看世界閱讀 1,333評論 0 6
  • 目錄:Promise 的含義基本用法Promise.prototype.then()Promise.prototy...
    BluesCurry閱讀 1,557評論 0 8
  • 請心寡欲,粗茶淡飯,堅持鍛練
    大海_ba32閱讀 207評論 0 0

友情鏈接更多精彩內容