07.26 搞懂ES6語法之promise-那些常用姿勢

點擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

講一下promise常用的使用習慣,不會太深入理解細節,但日常業務中知道這麼用就足夠了。

接觸過promise的都知道,promise可以用來避免異步操作函數里的多層嵌套回調問題。

先來看一段比較"頭疼"代碼

搞懂ES6語法之promise-那些常用姿勢

這段代碼裡,每隔1秒鐘輸出遞增的數字,如(1,2,3)。想象一下,如果將上面console換成業務邏輯且嵌套增多的話,定會讓你感覺到頭疼。沒辦法,因為解決多層異步場景最直接的方法是回調函數嵌套,將後一個操作放在前一個操作異步回調裡,但如果操作層數多了,就會很難管理。

認識一下Promise

Promise的出現正好解決了這一個問題,來看一下它是怎麼解決。

搞懂ES6語法之promise-那些常用姿勢

從它的結構上看,關於promise需要知道幾點:

1、Promise函數有一些靜態(類)方法(all,race,reject,resolve等),函數本身可以調用

2、它的原型對象上有catch,then等,也就是說這兩個方法需要在它實例上調用。

關於調用有不理解可以參考上一篇關於JS屬性和方法的剖析。

3、Promise的構造函數接收一個參數,這個參數是函數,並且傳入兩個參數:resolve,reject,分別表示異步操作執行成功後的回調函數和異步操作執行失敗後的回調函數。

以下講的都是基於這三個基礎知識點來展示的。

用Promise來改裝一下上面這段代碼

搞懂ES6語法之promise-那些常用姿勢

這樣,獲取數據的操作就可以放在Promise函數里面,業務邏輯就可以在then方法中處理。上面這段代碼中,return也可以直接返回一個值。把一個值也直接往下傳遞。這些可以根據具體情況來定。

接下來,說一下Promise的使用

【一、reject&then&catch關係】

reject返回異常,與resolve對應,resolve返回正常。如下代碼:

搞懂ES6語法之promise-那些常用姿勢

上面這段代碼,如果num大於5則用reject參數返回異常。那麼這個異常信息怎麼接收了?

接收異常信息有兩種方式:

1、用then的第二個參數接收

搞懂ES6語法之promise-那些常用姿勢

2、用catch方法來接收

搞懂ES6語法之promise-那些常用姿勢

這些不難理解哇。

【二、all&race方法】

搞懂ES6語法之promise-那些常用姿勢

上面這段代碼,應該都看的懂,當調用next函數時,隔兩秒返回一條信息。下面用靜態方法來調用。

1、all方法:

搞懂ES6語法之promise-那些常用姿勢

輸出結果:

搞懂ES6語法之promise-那些常用姿勢

很顯然,三個next()異步操作執行完畢之後,才會一起把他們的resolve結果打印出來。

2、race方法

搞懂ES6語法之promise-那些常用姿勢

輸出結果:

搞懂ES6語法之promise-那些常用姿勢

race從字面也可以理解出來作用,只要最快的異步執行完畢之後,就執行then。

最後總結一下:

關於Promise講了一些常用用法規則,應該是日常業務經常用到的幾個點,Promise處理的是一個異步問題,那麼關於整個JS處理異步問題的話題,往後在來討論,這裡只說了Promise的用法。


分享到:


相關文章: