版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 https://blog.csdn.net/qq_43168841/article/details/82988718
用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时表示相应已就绪，可以执行成功调用的方法,反之调用失败调用的方法.
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。