用原生js封裝了乙個ajax請求方法

2021-09-01 11:51:07 字數 1812 閱讀 6191

注意:get請求若需帶引數,引數仍丟入data屬性,自動拼接url

這段**是封裝的方法主體,注意的是,請求方法返回的是promise物件。

myajax.js

/**

* ajax請求

* @description 自己寫的ajax請求

* @param options 請求配置資訊

* @param options.url 請求位址

* @param options.datatype 資料格式 json/text/xml

* @param options.method 請求方式,預設get

* @param options.data 請求引數,json格式

* [options=]

* @returns 返回乙個promise物件

*/function

myajax

(options)

;return ostr.

slice(0

,-1)

;};return

newpromise

(function

(resolve, reject)

else

if(method ===

'get'

)else

;//接收返回結果

xhr.

onreadystatechange=(

)=>

;resolve

(data);}

else);

}};}

});}

;

分別測試了get/post請求,用兩個promise.all獲取最終的結果。

測試的檔案和php**,感興趣可以到我的github獲取一下

//測試用例

//post請求

let ajax_post =

myajax(}

);//get請求

let ajax_get =

myajax(}

);promise.

all(

[ajax_post, ajax_get]).

then

(res =>).

catch

( err =>);

//資源get請求

let arr =

myajax()

, json =

myajax()

, text =

myajax()

, xml =

myajax()

;promise.

all(

[arr, json, text, xml]).

then

(res =>).

catch

(err =>

);

結果列印如下圖。

因為是非同步請求,兩個promise.all結果列印的順序要看他們請求完成的先後來決定。這裡第二個promise.all的結果反而先列印了,因為我這裡有快取,所以檔案請求比較快,php程式需要處理,稍微慢一些。如果放在真正的公網環境,順序可能會不一樣。

以上,就是我自己封裝的乙個ajax請求方法,歡迎拍磚。

原生JS寫出乙個AJAX請求

使用js寫出乙個ajax請求 xmlhttprequest 物件是ajax的主要介面,用於瀏覽器與伺服器之間的通訊,可是使用多種協議,傳送任何格式的資料。xmlhttprequest 本身是乙個建構函式,可以使用 new 命令生成例項。let request new xmlhttprequest 建...

用原生js實現乙個new?

js 還沒執行的時候,js 環境裡已經有乙個 window 物件了,window 物件有乙個 object 屬性,window.object 是乙個函式物件,window.object 這個函式物件有乙個重要屬性是 prototype,window.object.prototype 裡面有 tost...

使用原生JS封裝乙個動畫函式

最近一直在忙專案,很少有時間回顧之前的知識,今天剛好要做乙個輪播,因為對相容性有一定的要求,使用了各種外掛程式和庫中的輪播,效果都不是很理想,一怒之下,使用原生js封裝了乙個輪播元件,其中重要的功能就是乙個動畫,看了一下以前封裝的函式,千瘡百孔,又進行了重新封裝,先上 有詳細的備註。function...