分享：用promise封裝ajax

前端攻城小牛發表於2018-10-09
Promise封裝

用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時表示相應已就緒，可以執行成功呼叫的方法,反之呼叫失敗呼叫的方法.

分享：用promise封裝ajax

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。


相關文章