promise的使用

首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise
异步操作之后会有三种状态

1. pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
2. fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
3. reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

promise基本使用

     var p = new Promise(function(resolve, reject) {
            // 发送异步请求
            QF.get("./a.php", {}, function(data) {
                if (!data.error) {
                    resolve(data.data, 123); // 这里只能传递一个参数
                } else {
                    reject();
                }
            });
        });

        p.then(function(msg, num) {
            // 这个函数是Promise实例状态变为成功时执行的函数
            console.log("成功" + msg);
            console.log(num) // undefined
        }, function(msg) {
            // 这个函数是Promise实例状态变为失败时执行的函数
            console.log("失败" + msg)
        })

1 var p = new Promise()

2 传递一个函数当作参数 这个函数里面发送异步请求
这个函数有两个参数
resolve 这是一个函数 执行的时候会把Promise实例的状态变为成功并且可以传递一个参数(只能传递一个) resolved fulfilled
reject 这也是一个函数 执行的时候会把Promise实例的状态变为失败并且可以传递一个参数(只能传递一个) rejected

3 p这个对象是一个Promsie的实例
它有3个状态 1 pending 2 resolved\fulfilled 3 rejected
它的状态变化 pending => resolved 或者 pending => rejected
变化之后不再发生改变
p这个对象有3个方法 then catch finally
then(successCallback, failedCallback) 接收两个参数 分别表示成功时、失败时的回调函数
successCallback
可以有一个参数 是resolve() 传递的参数
failedCallback
可以有一个参数 是reject() 传递的参数

连续多个Promise

  function sendAjax1() {
            return new Promise((resolve, reject) => {
                QF.get("./a.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第一个请求失败了");
                    }
                });
            });
        }
        function sendAjax2() {
            return new Promise((resolve, reject) => {
                QF.get("./b.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第二个请求失败了");
                    }
                })
            });
        }

        function sendAjax3() {
            return new Promise((resolve, reject) => {
                QF.get("./c.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第三个请求失败了");
                    }
                })
            })
        }
        console.log("第一个请求发送了")
        let p = sendAjax1();
        p.then(() => {
            console.log("第一个请求回来了")
            console.log("第二个请求发送了")
            return sendAjax2();
        })
        .then((data) => {
            console.log("第二个请求回来了")
            console.log("第三个请求发送了")
            return sendAjax3();
        })
        .then((data) => {
            console.log("第三个请求回来了")
        })
        // 统一处理前面每一个Promise实例失败的可能性 
        .catch(function (data) {
            console.log(data)
        })
        // 最后 不论成功还是失败 总会执行finally的函数
        .finally(function() {
            console.log("你好我是finally函数")
        })

同时发送多个请求

    function sendAjax1() {
            return new Promise((resolve, reject) => {
                QF.get("./a.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第一个请求失败了");
                    }
                });
            });
        }
        function sendAjax2() {
            return new Promise((resolve, reject) => {
                QF.get("./b.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第二个请求失败了");
                    }
                })
            });
        }
        function sendAjax3() {
            return new Promise((resolve, reject) => {
                QF.get("./c.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第三个请求失败了");
                    }
                })
            })
        }
        let p1 = sendAjax1();
        let p2 = sendAjax2();
        let p3 = sendAjax3();

        var arr = [p2, p1, p3];
        let p = Promise.all(arr);
        p.then(function(arr) {
            console.log(console.log("都成功了"));
            console.log(arr)
        })
        .catch(function(data) {
            console.log(data, "failed")
        })

Promise.all是Promise提供的静态方法 它可以同时监听多个Promise的实例
1 参数是一个数组 数组中的每一个成员都是Promise的实例 如果不是 那么会通过Promise.resolve转为Promise实例
2 Promise.all的返回值也是一个Promise实例 它的状态取决于这个数组中的每一个成员状态的变化
变化规则： 有任何一个成员的状态为rejected 那么rejected, 如果全部都是resolved 那么 resolved
成功回调函数中的参数 是一个数组 数组与all接收的那个数组一一对应 是各自传递的数据

 Promise.race 是Promise提供的一个静态方法 用于同时监听多个Promise 
        1 参数是一个数组 数组中的每一个成员都是Promise实例 如果不使 那么会通过Promise.resolve转为Promise实例
        2 Promise.race的返回值也是一个Promise实例 它的状态取决于这个数组中的最快发生变化的那个 
            变化规则：跟随最快发生状态变化的实例 
        let p = Promise.race([p1, p2, p3]);
        p.then(function(data) {
            console.log(data, "success")
        })
        .catch(function(data) {
            console.log(data, "failed")
        })