封裝Promise版本的ajax方法

2022-04-03 08:00:59 字數 1440 閱讀 4802

正如之前封裝的ajax方法

呼叫時可以使用callback形式進行介面偽巢狀,但容易形成callback hell**地獄。

在promise應用場景裡,我們使用jquery的$.get的promise語法格式(jquery內建支援promise)實現了then鏈式呼叫,接下來將promise語法封裝到之前的get方法裡,封裝後的調取方式如下

即我們自定義的get方法也支援then鏈式呼叫,這裡注意:

只有promise物件才可以呼叫.then方法,所以get封裝如下

然後將ajax操作複製進來,總體**如下

接下來注意,此時callback已經不需要了,所以去掉;

之後做下測試

注意:此時需要開啟json-server模擬伺服器api.啟動伺服器,才可以進行測試
下面還需要一些完善即可和之前promise應用場景的jquery支援的promise一樣呼叫,如下所示,還需進行json解析

至此結果如下,便可以進行正常使用

至此邊和之前jquery的get的promise方式相同,但$.get同時支援**形式呼叫,那麼我們這裡也可以加入**,讓其既支援promise,又支援callback
此時也可以通過callback呼叫

jquery為了顧及程式設計師不同寫法愛好,原始碼也是這麼處理,對多種格式都支援
完整**如下:

Promise對Ajax的封裝

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

手寫promise封裝ajax

其實,axios本身就是基於promise進行封裝的,我們之所以進行二次封裝,主要是為了能夠對錯誤資訊進行乙個集中的處理,根據不同的錯誤資訊,需要給使用者不同的提示,以便於給使用者乙個良好的操作體驗。封裝方法有很多種,基於class類的,基於建構函式的,也可以直接封裝乙個函式。具體按照個人習慣,最主...

Promise物件實現Ajax封裝

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