用promise封装ajax_ES6-promise封装AJAX请求

【摘要】

ES6-promise封装AJAX请求考必过小编为大家整理了关于ES6-promise封装AJAX请求的信息，希望可以帮助到大家！

ES6-promise封装AJAX请求

标签：const状态码setreject对象响应状态ISErequest==

// 接口地址:https://api.apiopen.top/getJoke

// 1.创建对象

const xhr = new XMLHttpRequest();

// 2.初始化

//发 GET类型的请求 给这个接口发请求https://api.apiopen.top/getJoke

// xhr.open("GET","https://api.apiopen.top/getJoke");表示成功

// xhr.open("GET","https://api.apiopen.top/getJoke");

// xhr.open("GET","https://api.apiopen.top/get"); 表示失败

xhr.open("GET","https://api.apiopen.top/get");

// 3.发送

xhr.send();

// 4.绑定事件，处理响应结果

xhr.onreadystatechange=function(){

// 对状态做出一个判断

if(xhr.readyState===4){

// 判断响应状态码 200-300 2系列的响应状态码都为成功

if(xhr.status >= 200 && xhr.status <= 300){

// 表示成功

console.log(xhr.response);

}else{

// 如果失败

console.error(xhr.status);

}

}

}

// 接口地址:https://api.apiopen.top/getJoke

const p = new Promise((resolve,reject)=>{

// 1.创建对象

const xhr = new XMLHttpRequest();

// 2.初始化

//发 GET类型的请求 给这个接口发请求https://api.apiopen.top/getJoke

xhr.open("GET","https://api.apiopen.top/getJoke");

// 3.发送

xhr.send();

// 4.绑定事件，处理响应结果

xhr.onreadystatechange=function(){

// 对状态做出一个判断

if(xhr.readyState===4){

// 判断响应状态码 200-300 2系列的响应状态码都为成功

if(xhr.status >= 200 && xhr.status <= 300){

// 表示成功 resolve修改promise的状态

resolve(xhr.response);

}else{

// 如果失败

reject(xhr.status);

}

}

}

})

// 指定回调 结构清晰

p.then(function(value){

// 如果成功打印value

console.log(value);

},function(reason){

console.log(reason);

})

ES6-promise封装AJAX请求

标签：const状态码setreject对象响应状态ISErequest==

以上就是ES6-promise封装AJAX请求的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！