分享:用promise封装ajax

用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

对前端的技术,架构技术感兴趣的同学关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费的架构师学习资料

知识体系已整理好,欢迎免费领取。还有面试视频分享可以免费获取。关注我,可以获得没有 的架构经验哦!!


分享到:


相關文章: