初识Promise

Promise

ES6新增内置类，用来处理JS中的异步编程的

AJAX的回调地狱

• AJAX的并行
  多个请求，只有前一个请求成功返回才进行后一个请求，以此类推，最后一个请求成功执行想做的事。
• AJAX的串行
  多个请求，所有请求同时发起，所有请求成功后，执行想做的事。

Promise的常用方法

• Promise.then()

    //new Promise([executor]):第一个执行函数必须传递
    /*
    *1. new Promise的时候会把executor执行，创建一个Promise实例（executor是Promise类的一个回调函数，Promise内部会执行它）
    *2.Promise不仅执行executor，还会传递两个参数（函数：resolve，reject）
    * =>resolve函数：执行代表异步操作成功，修改promise状态为resolved
    * =>reject函数：执行代表异步操作失败，修改promise状态为rejected
    *3.executor函数里边是要处理的异步操作
    */
    let pro = new Promise((resolve, reject)=>{
        setTimeout(() => {
            if(Math.random()<0.5){
                reject("呵呵");
            }
            resolve("哈哈");
        },1000);
    });
    //  执行then，把所传的方法放进事件池
    // 方法在pro状态改变时执行，可接收reject和resolve方法所传参数
    pro.then(result=>{
        // 状态为fulilled（resolved）时执行
        console.log("resolve：" + result);
    },error=>{
        // 状态为reject时执行
        console.log("reject：" + error);
    });

    //then 可以只传一个方法，成功的处理逻辑，但是代码会抛出异常，如果只传一个方法，需要用catch捕获异常
    pro.catch(catmsg=>{
        // 捕获异常
        console.log("catch：" + catmsg);
    });

    // finally方法，无论异步操作结果如何都会运行
    pro.finally(final=>{
        console.log("final：" + final);
    });

    // then(resolve,reject)
    // then/catch/finally执行，返回的结果是一个Promise的实例，所以可以链式的写下去
    // 上一个then的返回值会传递给下一个then的resolve和reject方法中

    new Promise((resolve, reject)=>{
        resolve(100);
        // reject(-100);
    }).then(res=>{
        console.log("res:" + res); //=>100
        return res *10; //then中return相当于把当前promise实例中的value改为返回值
    },err=>{
        console.log("err:" + err);
    }).then(res2=>{
        console.log("res2:" + res2); // => 1000
    },err2=>{
        console.log("err2:" + err2);
    })

• Promise.all()

    function ajax1() {}
    function ajax2() {}
    function ajax3() {}
    Promise.all([ajax1(),ajax2(),ajax3()]).then(result=>{
        //[ajax1,ajax2,ajax3] 三个都成功才会执行
        //result: [result1,result2,result3]
    }).catch(err={
        //[ajax1,ajax2,ajax3] 有一个失败就执行
    });

• Promise.race()

    function ajax1() {}
    function ajax2() {}
    function ajax3() {}
    Promise.race([ajax1(),ajax2(),ajax3()]).then(result=>{
        //[ajax1(),ajax2(),ajax3()]  只要有一个成功就执行,最先处理完的为主
        
    }).catch(err={
        //[ajax1(),ajax2(),ajax3()] 所有的都失败时执行
    });