JavaScript中promise异步编排
程序员文章站
2022-05-08 16:18:17
...
异步编排可以解决 “套娃” 的问题
这里有三个json文件,分别是
user.json
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}
user_course_1.json
{
"id": 10,
"course": "java"
}
course_score_10.json
{
"id": 100,
"score": 90
}
流程是这样的, 我们通过user.json的到user的id是1, 然后我们去找user_course_1这个文件, 对应id为1的user的课程信息, 里边找到课程id是10, 课程名为Java, 然后通过课程id为10去找course_score_10.json这个文件查到成绩,传统ajax请求是这样:
<script src="js/jquery.min.js"></script>
<script>
$.ajax({
url: `mock/user.json`, // 第一次查询, 查询用户信息
success(data) {
console.log("查询用户信息:", data);
$.ajax({
url: `mock/user_course_${data.id}.json`, // 第二次查询, 根据用户id查询课程信息
success(data) {
console.log("查询课程信息:", data);
$.ajax({
url: `mock/course_score_${data.id}.json`, // 第三次查询, 根据课程id查分数
success(data) {
console.log(`您的分数是:${data.score}`);
},
error(err) {
}
});
},
error(err) {
}
});
},
error(err) {
}
});
</script>
这就是一个连续套娃的表现,使用promise可以避免这种情况:如下
可以用Promise来请求url, 然后利用.then()来接着处理请求
<script src="js/jquery.min.js"></script>
<script>
let p = new Promise((resolve, reject)=>{ // resolve 表示操作成功处理数据, reject表示操作失败拒绝处理
// 异步操作
$.ajax({
url: `mock/user.json`,
success(data) {
// 查询用户成功
console.log("查询用户成功", data);
resolve(data);
},
error(err) {
reject(err);
}
});
});
p.then((obj)=>{
return new Promise((resolve, reject) =>{
$.ajax({
url: `mock/user_course_${obj.id}.json`,
success(data) {
// 查询用户成功
console.log("查询用户课程成功", data);
resolve(data);
},
error(err) {
reject(err);
}
})
});
}).then(obj =>{
$.ajax({
url: `mock/course_score_${obj.id}.json`,
success(data) {
// 查询用户成功
console.log("查询用户课程成绩成功", data);
},
error(err) {
}
})
})
</script>
当然这么写起来也是复杂,我们可以抽取函数,使其变得简单
<script>
function get(url, data) {
return new Promise(
(resolve, reject) => {
$.ajax({
url: url,
data: data,
success(data) {
resolve(data);
},
error(err) {
reject(err);
}
});
}
);
}
get(`mock/user.json`).then( // 查询用户
(data) => {
console.log("用户查询成功", data)
// 查询课程
return get(`mock/user_course_${data.id}.json`)
}
).then(
(data) => {
console.log("课程查询成功", data) // 课程查询成功
// 查询课程
return get(`mock/course_score_${data.id}.json`)
}
).then(
(data) => {
console.log("成绩查询成功",data)
}
).catch(
(err) => {
console.log(err);
}
)
</script>