谷粒商城学习——P34Promise异步编排

如果要做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
}