ES6之Promise學習與實踐

2022-01-19 08:23:38 字數 2757 閱讀 3494

1.前言

在平時的業務開發中,前端通常需要請求後台獲取資料,或者nodejs讀取檔案等等一系列的非同步操作,我們通常需要利用非同步操作的結果或者對非同步操作的結果進行處理。通常我們的解決方案是:在非同步操作成功或者失敗的**函式裡面寫方法,在非同步操作比較簡單的時候這樣寫**還是比較好理解的,當業務逐漸趨於複雜,這就形成了**地獄,**巢狀層數太多並且難以理解。不過,辦法總是有的,可以使用es6的新特性promise來解決問題。

2.promise的定義

promise 是非同步程式設計的一種解決方案,比傳統的解決方案——**函式和事件——更合理和更強大。它由社群最早提出和實現,es6 將其寫進了語言標準,統一了用法,原生提供了promise物件。

所謂promise,簡單說就是乙個容器,裡面儲存著某個未來才會結束的事件(通常是乙個非同步操作)的結果。從語法上說,promise 是乙個物件,從它可以獲取非同步操作的訊息。promise 提供統一的 api,各種非同步操作都可以用同樣的方法進行處理。

promise物件有以下兩個特點。

(1)物件的狀態不受外界影響。promise物件代表乙個非同步操作,有三種狀態:pending(進行中)、fulfilled(已成功)和rejected(已失敗)。只有非同步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是promise這個名字的由來,它的英語意思就是「承諾」,表示其他手段無法改變。

(2)一旦狀態改變,就不會再變,任何時候都可以得到這個結果。promise物件的狀態改變,只有兩種可能:從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果,這時就稱為 resolved(已定型)。如果改變已經發生了,你再對promise物件新增**函式,也會立即得到這個結果。這與事件(event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。

有了promise物件,就可以將非同步操作以同步操作的流程表達出來,避免了層層巢狀的**函式。此外,promise物件提供統一的介面,使得控制非同步操作更加容易。

promise也有一些缺點。首先,無法取消promise,一旦新建它就會立即執行,無法中途取消。其次,如果不設定**函式,promise內部丟擲的錯誤,不會反應到外部。第三,當處於pending狀態時,無法得知目前進展到哪乙個階段(剛剛開始還是即將完成)。

3.基本用法

es6規定,promise物件是乙個建構函式,用來生成promise例項

**如下:

const promise=new promise(function

(resolve,reject)

else

});

promise建構函式接受乙個函式作為引數,改函式的兩個引數分別是resolve與reject,resolve函式的作用是:將promsie物件的狀態從「未完成」變為「成功」,在非同步操作成功時**,並將非同步操作的結果value作為引數傳遞出去;reject函式的作用是:promise物件的狀態由「未完成」變為「失敗」,在非同步操作失敗時呼叫,並將非同步操作報出的錯誤作為引數傳遞出去。

promise例項生成以後,可以用then方法分別制定resolved的狀態和reject狀態的**函式。

**如下:

promise.then(function

(value) , function

(error) );

4.小例子-封裝ajax操作

以上的**是通過用原生的ajax和promise實現的獲取json的乙個方法,在網頁中執行得出以下的結果:

5.reject狀態**方法的寫法

promise

.then(

function

(data) , function

(err) );

以上是我們的reject狀態方法,可以作為promsie物件then方法的第二個引數。不過這樣寫有個缺點是:如果在resolve狀態之後再丟擲錯誤,則不會捕獲。

//

推薦寫法

promise

.then(

function(data) )

.catch(function

(err) );

通過promise這種寫法,我們使很多非同步操作的方法寫法同步化,能夠更好的組織優化**,而且在捕獲錯誤也更加容易,方便我們除錯解決問題。不足之處,多多指正。

ES6學習之Promise物件

promise 是非同步程式設計的一種解決方案,比傳統的解決方案 函式和事件 更合理和更強大。原生提供了promise 物件。promise 簡單說就是乙個容器,裡面儲存著之後才執行的事件。從語法層面來說,promise 是乙個物件,從它可以獲取非同步操作的訊息。promise 提供統一的 api,...

ES6 學習 Promise物件

1.promise含義 可以將promise物件看成是乙個容器,它儲存著未來才會結束的某個事件 一般是非同步操作事件 的結果,各 種非同步操作都可以用promise物件來處理 promise的特點 1 promise物件有三個狀態 pending 進行中 fulfilled 已成功 和rejecte...

ES6非同步操作之Promise

一直以來覺得非同步操作在我心頭像一團迷霧,可是它重要到我們非學不可,那就把它的面紗解開吧。es6 誕生以前,非同步程式設計的方法,大概有下面四種。非同步 簡單的說 執行順序不是一次連續完成的,中間加入了其他的程式運算,等第一階段準備好了資料,再返回來進行計算。來看看阮一峰老師es6入門中講的的 反覆...