ES6之Promise
2020-07-11 本文已影响0人
YAOPRINCESS
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<script>
// 1.查出当前用户ID
// 2.根据当前用户ID查出它的课程ID
// 3.根据课程ID获取分数
//以前，回调地狱
// $.ajax({
// url:"mock/user.json",
// // es6函数属性简写
// success(data){
// console.log("查询用户",data);
// $.ajax({
// // 使用字符串模板插入变量
// url:`mock/user_course_${data.id}.json`,
// success(data){
// console.log("当前课程信息",data),
// $.ajax({
// url:`mock/course_score_${data.id}.json`,
// success(data){
// console.log("课程得分：",data.score);
// console.log("得分"+data.score);
// }
// })
// }
// })
// }
// })
//现在
//Promise可以封装异步操作
//resolve,reject把数据往下传
//resolve使用.then捕获
//reject使用.catch捕获
function get(url,data){
// Promise里传个函数
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.score);
})
.catch(err=>{
console.log(err);
});
</script>
</body>
</html>
