如果要做3件事,A做完了,根据A的数据做B,B做完了根据B的数据做C
传统的ajax请求会循环嵌套(地狱回调)。可以利用Promise封装ajax解决这一情况
Promise语法本质
new Promise((fun1, fun2) => { fun1(111) // fun2(222) }).then((data) => { //获取fun1的参数 console.log(data); }).catch((data) => { //获取fun2的参数 console.log(data); });
Promise中传入一个函数,这个函数有两个函数参数,大家都叫resolve和reject,我之前学的时候发现容易迷糊,换种命名用fun1替代resolve,fun2替代reject
第一个参数fun1,可向.then传递参数,第二个参数fun2可向reject传递参数
看明白上述本质之后,对于开篇场景,可进一步将Promise封装成函数
function get1(data) { //自己定义一个方法整合一下 return new Promise((resolve, reject) => { if(data){ resolve(data+data) }else{ reject('没有参数') } }); } get1('A').then((data)=>{ console.log(data,'~~~') return get1(data); }).then((data)=>{ console.log(data,'!!!') return get1(); }).then((data)=>{ console.log(data,'<<<') return get1(); }).catch((data)=>{ console.log(data,'???') });
输出:
AA ~~~
html.html:16 AAAA !!!
html.html:22 没有参数 ???
这个明白之后,视频中的示例更简单了,直接贴代码
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> // function get1(data) { //自己定义一个方法整合一下 // return new Promise((resolve, reject) => { // if(data){ // resolve(data+data) // }else{ // reject('没有参数') // } // }); // } // get1('A').then((data)=>{ // console.log(data,'~~~') // return get1(data); // }).then((data)=>{ // console.log(data,'!!!') // return get1(); // }).then((data)=>{ // console.log(data,'<<<') // return get1(); // }).catch((data)=>{ // console.log(data,'???') // }); function get(url, data) { //自己定义一个方法整合一下 return new Promise((agr1, arg2) => { $.ajax({ url: url, data: data, success: function(data) { agr1(data); }, error: function(err) { arg2(err) } }) }); } get("mock/user.json") .then((data) => { console.log("用户查询成功~~~:", data) return get(`mock/user_course_1.json`); }) .then((data) => { console.log("课程查询成功~~~:", data) return get(`mock/corse_score_${data.id}.json`); }) .then((data) => { console.log("课程成绩查询成功~~~-----------:", data) }) .catch((err) => { //失败的话catch console.log("出现异常", err) }); </script>
输出:
用户查询成功~~~: {id: 1, name: "zhangsan", password: "123456"} html.html:44 课程查询成功~~~: {id: 10, name: "chinese"} html.html:48 课程成绩查询成功~~~-----------: {id: 100, score: 90}
项目目录结构:
user_course_1.json
{ "id": 10, "name": "chinese" }
user.json
{ "id": 1, "name": "zhangsan", "password": "123456" }
corse_score_10.json
{ "id": 100, "score": 90 }