Promise的常用API和解决异步的方法

promise的常用API

Promise.all()  并行执行所有的异步请求，当所有的请求都返回成功结果时，Promise对象的结果则变成resolved成功；有一个不成功则失败，Promise对象的结果则变成rejected失败。
Promise.prototype.catch()  请求出现错误或异常时被catch捕获。相当于$.AJAX()中的error回调函数。
Promise.prototype.finally() 不论请求是否成功，finally都会执行。相当于$.AJAX()中的complete回调函数。
Promise.prototype.then()  请求成功时执行。相当于$.AJAX()中的success回调函数。
Promise.race()   “竞速”方法，参数与Promise.all()相同，多个任务，谁先返回结果，Promise的状态就对应返回结果的状态。
Promise.reject(err) // 调用此方法，把Promise对象的结果变成失败。
Promise.resolve(data)// 调用此方法，把Promise对象的结果变成成功。

resolve和reject

        // resolve() 使promise对象处于成功状态
        Promise.resolve("我成功了").then(res=>{
            console.log(res);
        })
        //  reject() 使promise对象处于失败状态
        Promise.reject("饿哦失败了").catch(res=>{
            console.log(res);
        })

all()   cook()和eat()是两个异步任务

        // all() 参数是promise组成的数组
        //  只有当每一个promise都为成功状态的时候，all()之后的promise才为成功状态        
        Promise.all([cook(),eat()]).then(res=>{
            console.log(res);// res是多个promise对象传递的数据组成的数组
        }).catch(err=>{
            console.log(err);
        }) 

race()  cook()和eat()是两个异步任务

        // race() 表示最先返回状态的promise 
        Promise.race([cook(),eat()]).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

Promise解决异步的方法

异步

什么是同步和异步？
我们知道JavaScript的执行环境是「单线程」。所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程。
同步：synchronize，同步模式，即上述所说的单线程模式，一次只能执行一个任务，函数调用后需等到函数执行结束，返回执行的结果，才能进行下一个任务。如果这个任务执行的时间较长，就会导致「线程阻塞」。
异步：asynchronous，异步模式，即与同步模式相反，可以一起执行多个任务，函数调用后不会立即返回执行的结果，如果任务A需要等待，可先执行任务B，等到任务A结果返回后再继续回调。

异步也是执行在单线程上的。Web Worker执行在多线程上。

我们在平时操作的XMLHttpRequest对象，$.AJAX(), $.post(), $.get(), $.getJSON(), setInternal(), setTimeout(), axios.get(), axios.post(), vue-resource模块包中的this.$http.get(),this.$http.post()等等都是异步请求的方案。其中 axios.get(), axios.post(), vue-resource中的this.$http.get(),this.$http.post()会在学习vue框架中接触到。

jQuery中的AJAX操作返回的是deferred对象（延迟对象），此对象实现了Promise对象标准。

使用then去解决异步

   // 第一个异步任务
        function cook(){
            console.log("开始做饭");
            var p = new Promise(function(resolve,reject){
                setTimeout(()=>{
                    console.log("做饭完成");
                    resolve("蛋炒饭")
                },2000)
            })
            return p
        }
        // 第二个异步任务
        function eat(data){
            console.log("开始吃饭，吃的是" + data);
            var p = new Promise((resolve,reject)=>{
                setTimeout(() => {
                    console.log('吃完了');
                    resolve("碗和筷子")
                }, 2000);
            })
            return p
        }
        // 第三个异步任务
        function wash(data){
            console.log("开始洗碗，洗的是" + data);
            var p = new Promise((resolve,reject)=>{
                setTimeout(() => {
                    console.log('洗完了');
                    resolve("睡觉")
                }, 2000);
            })
            return p
        }


//解决方法
// 第一种写法（不采用），不采用出现多层回调嵌套
        //  then 只有在resolve之后才会执行
        cook().then(function(data){
            console.log(data);
            // 要在做好饭回调里面去调eat
            eat(data).then(function(d){
                console.log(d);
                wash(d).then(function(dd){
                    console.log(dd);
                })
            })
        })
        // 第二种写法
        // 想要的效果在调用cook之后调用eat()再调用wash()
        // 在cook的then函数返回第二个异步任务调用的结果，第二异步任务返回结果也是promise。所以在和第一个then同级别的地方使用then作为第二个异步任务的成功回调
        cook().then(data=>{
            return eat(data)
        })
        .then(data=>{
            return wash(data)
        })
        .then(data=>{
            console.log(data);
        })
        // 第三种写法  
        // 箭头函数如果是一句话，可以把return省掉
        cook().then(data=>eat(data))
        .then(data=>wash(data))
        .then(data=>{console.log(data);})
        // 第四种方法
        // 自动把参数传进第二个异步任务里面
        cook().then(eat).then(wash).then(data=>{
            console.log(data);
        })