<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let xhr = new XMLHttpRequest();
//第一步创建xhr对象
xhr.open("get", "./data.json", true);
//第二步:设置请求的基本信息 如果是post请求在这里要设置一个头信息
// get方式传参是在路径后面? 拼接 而post是在send里传
// 第三个参数 可以控制异步同步 true就是异步
xhr.send();
//第三步:向服务器发送链接
// xhr.onreadystatechange = function() {
// console.log(xhr.readyState);
// if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
// }
// };
// 第四步 在xhr对象和服务器都响应成功的时候拿到数据
// 可以用onreadystatechange 事件这个事件的意思是 只要xhr的状态发生改变就会触发 需要判断xhr的状态为4 服务器的状态为200 就代表都准备好了 我们就可以拿到数据了
// 也可以用下面的onload事件代替 onload本身就代表xhr对象已经准备好了 所以我们只需要判断服务器的状态是200就可以拿到数据了
// responseText就是拿到的数据
xhr.onload = () => {
if (xhr.status == 200) {
// console.log(xhr.responseText);
} else {}
};
//onload事件在js中是加载完成
// 把上面的原生js请求ajax的普通写法变成promise的写法
function js_ajax(params) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(params.method, params.url, true);
xhr.send();
xhr.onload = () => {
if (xhr.status == 200) {
let res = JSON.parse(xhr.responseText);
resolve(res);
} else {
reject("请求失败");
}
};
});
}
//把异步请求放进promise容器中 就变成一种promise的写法 then就执行成功的resolve回调cathc就执行失败的reject回调
js_ajax({
method: "get",
url: "./data.json",
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
// js封装的promise处理回调地狱的写法
js_ajax({
method: "get",
url: "./data.json",
})
.then((res) => {
console.log(res);
return js_ajax({
method: "get",
url: "./data2.json",
});
})
.then((res) => {
console.log(res);
return js_ajax({
method: "get",
url: "./data3.json",
});
})
.then((res) => {
console.log(res);
});
</script>
</body>
</html>
js封装promise
最新推荐文章于 2023-04-24 17:20:38 发布