手寫promise封裝ajax

2021-10-01 10:06:00 字數 962 閱讀 7819

其實,axios本身就是基於promise進行封裝的,我們之所以進行二次封裝,主要是為了能夠對錯誤資訊進行乙個集中的處理,根據不同的錯誤資訊,需要給使用者不同的提示,以便於給使用者乙個良好的操作體驗。

封裝方法有很多種,基於class類的,基於建構函式的,也可以直接封裝乙個函式。

具體按照個人習慣,最主要的還是要對後端給我們返回的狀態碼或者狀態值進行判斷,如果成功,則直接resolve資料,否則的話,對不同的錯誤資訊做出不同的操作即可。

封裝方法

/**

* @function request 二次封裝ajax請求函式

* @param options 物件形式配置引數

* @param options.url 請求路徑

* @param [options.method=get] 請求方式

* @param [options.params] get請求攜帶資料

* @param [options.data] post請求攜帶資料

* @param [options.headers] 請求頭

* @return

* */

function

request

(options)

; options = object.

assign

(defaultoptions, options)

;return

newpromise

((resolve, reject)

=>

else

if(res.data.msg)})

.catch

(err =>)}

)}

呼叫方法
request()

.then

(res =>).

catch

(err =>

)

Promise對Ajax的封裝

jquery的ajax 在開發中,我們常常會用到ajax,根據請求的位址,伺服器返回相應的success或者error,而且ajax也是可以非同步的,async為true的時候為非同步,反之同步,下面以非同步為例,因為我們的promise就是非同步操作。ajax error function dat...

Promise物件實現Ajax封裝

故心故心故心故心小故衝啊 預設methods get 預設url http localhost 3306 預設data null const axios else xhr.onreadystatechange else 最後返回乙個promise return promise node中做了倆個測試...

封裝Promise版本的ajax方法

正如之前封裝的ajax方法 呼叫時可以使用callback形式進行介面偽巢狀,但容易形成callback hell 地獄。在promise應用場景裡,我們使用jquery的 get的promise語法格式 jquery內建支援promise 實現了then鏈式呼叫,接下來將promise語法封裝到之...