Promise异步编程实践

问题举例：

以下连续调用三个接口请求，由于异步的关系，最终显示的结果不是按顺序的

    $.ajax({
        url: "http://localhost:3000/promise_test1",
        success: function(result) {
            console.log(result);
        },
        error: function(error) {
            console.log(error);
            reject(error)
        }
    });
    $.ajax({
        url: "http://localhost:3000/promise_test2",
        success: function(result) {
            console.log(result);
        },
        error: function(error) {
            console.log(error);
        }
    });
    $.ajax({
        url: "http://localhost:3000/promise_test3",
        success: function(result) {
            console.log(result);
        },
        error     : function(error) {
            console.log(error);
        }
    });

输出结果

当然我们会想到逻辑回调嵌套，但是多个接口嵌套，太过累赘，可读性差(回调地狱)

如下所示

    $.ajax({
        url: "http://localhost:3000/promise_test1",
        success: function(result) {
            console.log(result);
            $.ajax({
                url: "http://localhost:3000/promise_test2",
                success: function(result) {
                    console.log(result);
                    $.ajax({
                        url: "http://localhost:3000/promise_test3",
                        success: function(result) {
                            console.log(result);
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                },
                error: function(error) {
                    console.log(error);
                }
            });
        },
        error: function(error) {
            console.log(error);
            reject(error)
        }
    });

Promise可以解决以上的回调地狱问题的出现；

promise里面放置一个函数，两个参数，一个resolve一个reject.resolve返回执行成功回调，reject失败回调。

    var p = new Promise((resolve, reject) => {
        resolve(res) //回调成功执行
        reject(error) //回调失败执行
    })

举例：

    function p() {
        var p = new Promise((resolve, reject) => {
            $.ajax({
                url: "http://localhost:3000/promise_test1",
                success: function(result) {
                    console.log(result);
                    resolve(result)
                },
                error: function(error) {
                    console.log(error);
                    reject(error)
                }
            });
        })
        return p;
    }

上面的例子可以改写为：

    function p(url) {
        var p = new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                success: function(result) {
                    resolve(result)
                },
                error: function(error) {
                    reject(error)
                }
            });
        })
        return p;
    }

    p("http://localhost:3000/promise_test1").then(
        function(data) {
            // 执行resolve
            console.log(data);
        },
        function(error) {
            // 执行reject
            console.log(error);
        }
    )

结果

    function p(url) {
        var p = new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                success: function(result) {
                    resolve(result)
                },
                error: function(error) {
                    reject(error)
                }
            });
        })
        return p;
    }

    p("http://localhost:3000/promise_test1")
        .then(
            function(data) {
                // 执行resolve
                console.log(data);
                // 必须返回一个Promise实例
                return p("http://localhost:3000/promise_test2");
            },
        )
        //此处.then获取promise_test2接口的resolve回调
        .then(function(data) {
            console.log(data);
            return p("http://localhost:3000/promise_test3");
        })
        //此处.then获取promise_test3接口的resolve回调
        .then(function(data) {
            console.log(data);
        })

结果如下所示

Promice.then()  //获取异步结果,l参数为两个函数回调，
Promise.catch() //获取异常信息 参数为一个回调函数 相当于then中的第二个函数
Promise.finally() //成功与否都会执行