前端基础ES6-promise异步编排
2024-01-03 本文已影响0人
让你变好的过程从来都不会很舒服
在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致 JavaScript 的所
有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连
串的 ajax 请求 a,b,c,d... 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层
层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外
层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧......总之，这
种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度
案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：
- 查询用户，查询成功说明可以登录
- 查询用户成功，查询科目
- 根据科目的查询结果，获取去成绩
分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提
供各科成绩的接口，为了渲染方便，最好响应 json 数据。在这里就不编写后台接口了，而
是提供三个 json 文件，直接提供 json 数据，模拟后台接口：
user.json：
{ "id": 1, "name": "zhangsan", "password": "123456"
}
user_corse_1.json:
{ "id": 10, "name": "chinese"
}
corse_score_10.json:
{ "id": 100, "score": 90
}
完成案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
let get = function (url, data) { // 实际开发中会单独放到 common.js 中
return new Promise((resolve, reject) => {
$.ajax({
url: url,
type: "GET",
data: data,
success(result) {
resolve(result);
},
error(error) {
reject(error);
}
});
})
}
// 使用封装的 get 方法，实现查询分数
get("mock/user.json").then((result) => {
console.log("查询用户：", result);
return get(`mock/user_corse_${result.id}.json`);
}).then((result) => {
console.log("查询到课程：", result);
return get(`mock/corse_score_${result.id}.json`)
}).then((result) => {
console.log("查询到分数：", result);
}).catch(() => {
console.log("出现异常了：" + error);
});
</script>
</body>
</html>
