ES6中的Promise

不使用promise进行的异步操作:

$.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(err) {
                                console.log("出现异常:", err)
                            }
                        });
                    },
                    error(err) {
                        console.log("出现异常:", err)
                    }
                });
            },
            error(err) {
                console.log("出现异常:", err)
            }
        });

这样的代码除了不够美观,且不利于复用。

使用promise:

let p = new Promise((resolve, reject) => {
            $.ajax({
                url: "mock/user.json",
                success(data) {
                    console.log("查询用户:", data);
                    resolve(data)
                },
                error(err) {
                    reject(err)
                }
            });
        });

    p.then((data) => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: `mock/user_corse_${data.id}.json`,
                success(data) {
                    console.log("查询到的课程:", data)
                    resolve(data)
                },
                error(err) {
                    reject(err)
                }
            });
        });
    }).then((data) => {
        console.log("上一步操作的結果:", data)
        $.ajax({
            url: `mock/corse_score_${data.id}.json`,
            success(data) {
                console.log("查询到的分数:", data)
            },
            error(err) {
                console.log("出现异常:", err)
            }
        });
    }).catch((err) => {
        console.log("出现异常:", err)
    });

引用下廖雪峰官网的一句总结:

可见Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了:

promise

再对请求进行封装:

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_corse_${data.id}.json`, data)
            }).then((data) => {
                console.log("~~~~~查询到的课程:", data)
                return get(`mock/corse_score_${data.id}.json`, data)
            }).then((data)=>{
                console.log("~~~~查询到的分數:", data)
            }).catch((err)=>{
                console.log("出现异常:",err)
            })

发表评论

电子邮件地址不会被公开。 必填项已用*标注