vue-Promise

Es6是一个非常好用重要和好用的特性就是promise，promise是异步编程的一种解决方案

网络请求的回调地狱

网络的请求的回调里嵌套了好几层网络请求，这就是回调地狱

基本用法

1. 请求访问成功执行then中的回调函数

        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log("settime out excute");
                resolve("promise");
            },1000)
        }).then((data)=>{
            console.log(data);
        })

2. 请求失败执行catch中的回调函数

        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log("settime out excute");
                reject("error message");
            },1000)
        }).then((data)=>{
            console.log(data);
        }).catch((ex)=>{
            console.log(ex)
        })

3.then中传入两个函数，一个执行success的回调，一个执行failed的回调

            new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("set time out");
                    resolve("success");
                    reject("exception");
                }, 1000)
            }).then((data) => {
                console.log(data)
            }, (error) => {
                console.log(error)
            })

4. promise的三种状态
   首先，当我们开发中有异步操作时，就可以给异步操作包装一个promise
   三种状态：

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

promise的链式调用

我们在看promise的流程图时，发现无论是then还是catch时都可以返回一个Promise，所以我们的代码其实可以链式编程
通过Promise包装了一下新的数据，将Promise对象返回了

• Promise.resolved():将数据包装成Promise对象，并且在内部回调resolve函数
• Promise.reject()：将数据包装成Promise对象，并在内部回调reject()函数

        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log("链式编程");
                resolve("Hello world");
            },1000)
        }).then(data=>{
            //then函数可以返回一个promise对象
                console.log(data)
            //通过Promise.resolve包装成Promise对象，并且在内部回调resolve函数，将数据传到then函数中
                return Promise.resolve(data+'111')
        }).then(
            data=>{
                console.log(data)
                return Promise.resolve(data+'222')
            }
        ).then(
            data=>{
                console.log(data);
            }
        )

链式调用的简写

        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log("链式编程");
                resolve("Hello world");
            },1000)
        }).then(data=>{
            //then函数可以返回一个promise对象
                console.log(data)
            //直接返回数据
                return data+'111'
        }).then(
            data=>{
                console.log(data)
                return data+'222'
            }
        ).then(
            data=>{
                console.log(data);
            }
        )

结果是一样的：

promise中all方法的使用

需求：当一个函数需要依赖两个网络请求返回的数据，就可以使用到all方法

1. 自己实现的方法：

        isResult1=false;
        isResult2=false;
        $.ajax({
            url:'',
            success:function(){
                isResult1 =true,
                handleResult();
            }
           

        })

        $.ajax({
            url:'',
            success:function(){
                isResult2=true;
                handleResult();
            }
        })
        function handleResult(){
            if(isResult1&&isResult2){

            }
        }

2 all方法

        Promise.all([
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("访问请求1");
                    //resolve({name:'ss',age:'12'});
                    resolve("data1");
                }, 1000);
            }),
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("访问请求2");
                    //可以传入对象
                    //resolve({class:'1',score:'20'});
                    resolve("data2");
                }, 1000);
            })
        ]).then(
            (result) => {
                console.log(result)
            })