分享:用promise封装ajax
发布在全栈开发工程师2018年10月9日view:145前端工程前端工程师面试web
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

分享:用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 本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论
发表评论
暂无评论
WRITTEN BY
前端攻城小牛
你所谓的稳定不过是在浪费生命
TA的新浪微博
PUBLISHED IN
全栈开发工程师

往前端这条不归路再次迈进

我的收藏