异步编排可以解决 “套娃” 的问题
这里有三个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>
