<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 基于Promise发送Ajax请求
function queryData(url) {
var p = new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
// https://blog.csdn.net/yuzhoaheyou/article/details/106563208
// xhr.onreadystatechange和xhr.onload都是xhr下面的方法,
//onreadystatechange是当readystate改变时触发,onload是当请求完成时触发
// console.log(xhr);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
// https://blog.csdn.net/u013381651/article/details/51261956
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理正常的情况
resolve(xhr.responseText);
} else {
// 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
// 这里的return p 是为了返回一个promise实例对象,以便使用.then方法,不然是无
//法使用.then; 但是即使没有return p;上面promise内的语句依然会被执行
return p;
}
// queryData('http://localhost:3000/data')
// .then(function(data){
// console.log(data);
// },function(info){
// console.log(info)
// });
// ============================
// 发送多个ajax请求并且保证顺序
queryData('http://localhost:3000/data')
.then(function(data) {
console.log(data)
return queryData('http://localhost:3000/data1');
})
.then(function(data) {
console.log(data);
return queryData('http://localhost:3000/data2');
})
.then(function(data) {
console.log(data)
});
</script>
</body>
</html>
基于Promise发送Ajax请求并解决回调地狱问题
最新推荐文章于 2022-08-24 16:20:33 发布