注意: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...