数据文件
user.json
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}user_corse_1.json
{
"id": 10,
"name": "chinese"
}corse_score_10.json
{
"id": 100,
"score": 90
}用ajax开发，嵌套很麻烦
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$.ajax({
url: "user.json",
success(data) {
console.log("查询用户：", data);
$.ajax({
url: `user_corse_${data.id}.json`,
success(data) {
console.log("查询到课程：", data);
$.ajax({
url: `corse_score_${data.id}.json`,
success(data) {
console.log("查询到分数：", data);
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
</script>
</body>
使用promise函数
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
//使用箭头函数可以简写为
new Promise((resolve, reject) => {
// 执行异步操作
$.ajax({
url: `user.json`,
success(data) {
console.log("查询成功：" + data.id);
resolve(data);// 调用 resolve，代表 Promise 将返回成功的结果
},
error(error) {
reject(error);// 调用 reject，代表 Promise 会返回失败结果
}
})
}).then((data) => {
return new Promise((resolve, reject) => {
$.ajax({
url: `user_corse_${data.id}.json`,
success(data) {
console.log("查询到课程：", data);
resolve(data);
},
error(error) {
reject(error);// 调用 reject，代表 Promise 会返回失败结果
}
});
})
}).then((data) => {
return new Promise((resolve, reject) => {
$.ajax({
url: `corse_score_${data.id}.json`,
success(data) {
console.log("查询到分数：", data);
},
error(error) {
console.log("出现异常了：" + error);
}
});
})
}).catch((error) => {
})
</script>
</body>
继续封装，把共用的get提取出来
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<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("user.json").then((result) => {
console.log("查询用户：", result);
return get(`user_corse_${result.id}.json`);
}).then((result) => {
console.log("查询到课程：", result);
return get(`corse_score_${result.id}.json`)
}).then((result) => {
console.log("查询到分数：", result);
}).catch(() => {
console.log("出现异常了：" + error);
});
</script>
</body>
