• 谷粒商城学习——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
    }
  • 相关阅读:
    音频编辑大师 3.3 注冊名 注冊码
    Cocos2d_x的特点及环境配置
    strcpy_s与strcpy的比較
    Android Bundle类
    DB9 公头母头引脚定义及连接
    80x86汇编小站站长简单介绍
    腾讯webqq最新password加密算法,hash算法
    八大排序算法总结
    xpage 获取 附件
    转基因大豆提高大豆油脂产量80%
  • 原文地址:https://www.cnblogs.com/yanan7890/p/14873229.html
Copyright © 2020-2023  润新知