欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript中promise异步编排

程序员文章站 2022-05-08 16:18:17
...

异步编排可以解决 “套娃” 的问题
JavaScript中promise异步编排
这里有三个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请求是这样:
JavaScript中promise异步编排

<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>