用promise封裝ajax

<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">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()
 })
}
</pre>
 

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

最後

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進群交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。