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请求是这样：

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