手把手教你用promise封装ajax

用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.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。