ES6的promise实战

矫情吗；* 2021-07-24 11:03 329阅读 0赞

# 一 点睛 #

当发送异步请求时，如果我们下一个异步请求需要用到上一个异步请求的结果，这个时候就会发生连续嵌套，非常混乱，而通过promise 对象和 then 函数可以解决这一问题

# 二 数据准备 #

1 user.json

{
        "id": 1,
        "name": "zhangsan",
        "password": "123456"
    }

2 user\_corse\_1.json

{
        "id": 10,
        "name": "English"
    }

3 corse\_score\_10.json

{
        "id": 100,
        "score": 90
    }

# 二 实战 #

1 原始实现

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    
    <body>
        <script>
            /* 原始嵌套 */
            // 1 查询当前的用户信息
            // 2 按照当前用户id查出它的课程
            // 3 根据当前课程id查出分数
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("查询到用户:", data)
                    $.ajax({
                        url: `mock/user_corse_${data.id}.json`,
                        success: function (data) {
                            console.log("查询到课程:", data)
                            $.ajax({
                                url: `mock/corse_score_${data.id}.json`,
                                success: function (data) {
                                    console.log("查询到分数:", data)
    
                                },
                                error: function (error) {
                                    console.log("出现异常" + error)
                                }
                            });
                        },
                        error: function (error) {
                            console.log("出现异常" + error)
                        }
                    });
                },
                error: function (error) {
                    console.log("出现异常" + error)
                }
            }
            )
        </script>
    </body>
    
    </html>

测试结果

![20201018161122201.png][]

2 Promise实现

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    
    <body>
        <script>
            /* 通过 promise 对象和 then 函数处理 */
            // 1 promise可以封装异步操作，查用户
            let p = new Promise((resolve, reject) => {
                $.ajax({
                    url: "mock/user.json",
                    success: function (data) {
                        console.log("查询用户成功", data);
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err);
                    }
                })
            });
            // 2 这里的obj就是上一步给我们传下来的data，在此接收，查课程
            let p1 = 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);
                        }
                    });
                })
            }).catch((err) => {
    
            })
            // 3 查分数
            p1.then((data) => {
                $.ajax({
                    url: `mock/corse_score_${data.id}.json`,
                    success: function (data) {
                        console.log("查询分数成功", data);
                    },
                    error: function (err) {
                    }
                });
            })
        </script>
    </body>
    
    </html>

测试结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

3 Promise封装实现

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    
    <body>
        <script>
            /* 封装 promise */
            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);
                })
        </script>
    </body>
    
    </html>

测试结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[20201018161122201.png]: /images/20210724/5ac450cec7c644b9a84e1a5d0aa1fa74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/63d4a2d68d434e0487ef9794c54c85d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/8768fdf9800644f78c55592d7ccd22ec.png