首页 > Web开发 > 详细

基于Promise发送Ajax请求

时间:2021-02-04 15:26:30      阅读:49      评论:0      收藏:0      [点我收藏+]

function promiseAjax(url){

var p = new Promise(reslove,reject=>{  //创建一个Promise实例对象

var xhr = new XMLHttlRequest();    // 创建 XMLHttpRequest对象

xhr.onreadyStateChange=function(){  //实例对象状态发生改变时调用将函数

if(xhr.readyState!==4) return;    //使用 if判断语句判断请求状态是否完成,如果没有完成直接return

if(xhr.readyState==4&&xhr.state==200){ //当请求状态完成时,并且状态码为200时候进入if判断分支

reslove(xhr.responseText)//进入到请求成功的if分支中后,使用reslove函数将请求成功后返回的结构传递出去

}else{

reject(‘发生了错误‘) //reject函数是将请求失败的结果传递出去

}

}

xhr.open(‘get‘,url)//设置请求方式和请求地址

xhr.send(null)//因为是采用‘Get’方式发送请求,send()中为null

})

return p;//将Promise实例对象返回出去,方便在外部使用

}

promiseAjax(‘http://www.baidu.com‘).then(function(resolve){//调用这个函数,这个函数的结果是Promise实例对象,可以采用.then()的方式得到请求成功的结果

//在.then()中有两个回调函数,回调函数中的resolve是传递过来的请求成功的结果

console.log(reslove) //正常情况下输出结果

}),function(reject){//第二个回调函数中接收请求错误的结果

console.log(reject)  //发生错误时打印错误信息

})

注意:.then()中可以只接收请求成功的结果,请求错误的结果可以使用链式编程.catch()的方式接收

基于Promise发送Ajax请求

原文:https://www.cnblogs.com/Liushuo6/p/14372411.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!