用promise封裝ajax
var ajaxOptions = {
url: 'url',
method: 'GET',
async: true,
data: null,
dataType: 'text',
}
function ajax(protoOptions) {
var options = {};
for(var i in ajaxOptions){
options[i] = protoOptions[i] || ajaxOptions[i];
}
return new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.open(options.method, options.url, options.async);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
resolve(this.responseText, this);
} else {
var resJson = {
code: this.status,
response: this.response
}
reject(resJson, this)
}
}
xhr.send()
})
}
複製程式碼
1,open(method, url, async)
method: GET和POST;
url: 傳送到服務端的url;
async: 非同步true,同步false;
2,onreadystatechange
每當readyState的值變化,onreadystatechange函式自動執行
3,readyState 伺服器響應的狀態資訊
- 0: 請求未初始化
- 1: 伺服器連線已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成,且響應已就緒
當readyState的值為4,status狀態為200時表示相應已就緒,可以執行成功呼叫的方法,反之呼叫失敗呼叫的方法.
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:864305860,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。