基于promise处理原生Ajax请求
2023-06-07 本文已影响0人
小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function queryDate(url){
var p=new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return ;
if(xhr.readyState == 4 && xhr.status == 200){
resolve(xhr.responseText);
}else{
reject('服务器走丢了');
}
};
xhr.open('get',url);
xhr.send(null);
});
return p;
};
queryDate('http://localhost:3000/data')
.then (function(data){
console.log(data);
},function(info){
console.log(info);
});
</script>
</body>
</html>
关于then参数的返回值问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
多次发送Ajax请求
queryDate()
.then(function(date){
return queryDate();
})
.then(function(date){
return queryDate();
})
.then(function(date){
return queryDate();
});
-->
<!--
then参数的返回值
（1）返回promise实例对象
- 返回的该实例对象会调用下一个then
（2）返回一个普通值
- 返回的普通值会直接传递给下一个then，通过then参数中的函数接受该值
-->
<script>
var num=0;
function queryDate(num){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve(num);
},1000);
// xhr.open('get',url);
// xhr.send(null);
}
);
}
queryDate(1)
.then (function(data){
console.log(data);
return queryDate(2);
},function(info){
console.log("#");
// console.log(info);
// return queryDate();
})
.then(function(data){
console.log(data);
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve(3);
},1000);
});
},function(info){
// console.log(info);
// return new Promise(function(resolve,reject){
// setTimeout(function(){
// resolve(23);
// },1);
// });
})
.then(function(data){
console.log(data);
return "hello";
})
.then(function(data){
console.log(data);
console.log(arguments);
});
</script>
</body>
</html>
