谷粒商城 27- 前端基础 ES6 promise 异步编排

promise

promise 的介绍

原有的ajax 嵌套调用的代码

 $.ajax({
            url: "mock/user.json",
            success(data) {
                console.log("查询用户：", data);
                $.ajax({
                    url: `mock/user_corse_${data.id}.json`,
                    success(data) {
                        console.log("查询到课程：", data);
                        $.ajax({
                            url: `mock/corse_score_${data.id}.json`,
                            success(data) {
                                console.log("查询到分数：", data);
                            },
                            error(error) {
                                console.log("出现异常了：" + error);
                            }
                        });
                    },
                    error(error) {
                        console.log("出现异常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });

发送的请求如下

控制台打印如下

原有的ajax请求, 虽然嵌套能查询成功 ,但是嵌套多层, 不便于维护 .

使用Promise的代码

 let p = new Promise((resolve, reject) => {
            //1、异步操作
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("查询用户成功:", data)

                    //请求成功后的操作, 不需要嵌套查询 
                    resolve(data);
                },
                error: function (err) {
                    reject(err);
                }
            });
        });
        
        // p.then 用于执行Promise请求成功后的操作 即 resolve(data) 方法  obj为上一步的结果数据
        p.then((obj) => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/user_corse_${obj.id}.json`,
                    success: function (data) {
                        console.log("查询用户课程成功:", data)
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                });
            })
        }).then((data) => {
           // console.log("上一步的结果", data)
            $.ajax({
                url: `mock/corse_score_${data.id}.json`,
                success: function (data) {
                    console.log("查询课程得分成功:", data)
                },
                error: function (err) {
                }
            });
        })

链式调用, 简洁的写法

用Promise封装一个发送请求的方法, 并且可以链式调用

  //该方法 url请求路径, data 请求参数
        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        //第一步, 直接查询用户信息 
        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~:", data)

                //第二步, 查询课程
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)

                  //第三步, 查询成绩
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{
                console.log("出现异常",err)
            });

结果打印如下 :