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

╰+哭是因爲堅強的太久メ 2023-03-02 14:52 35阅读 0赞

### promise ###

promise 的介绍  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

### 原有的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);
                }
            });

发送的请求如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
控制台打印如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
原有的ajax请求, 虽然嵌套能查询成功 ,但是嵌套多层, 不便于维护 .

### 使用Promise的代码 ###

### 链式调用, 简洁的写法 ###

用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)
                });

结果打印如下 :  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/5fcdc00bcab74f3c801f04fbd6bb9a8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/9a7bfccaf23a4c05b608d418b4f22f0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/b721a62f520b414c82843acad99d2efb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/b425669d5b104e4b89f4434fca6dad05.png