初识es6 Promise

Promise简介

Promise 是异步编程的一种解决方案，有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise的方法

console.log(Promise.prototype)

image.png

可以发现Promise的方法有catch，finally，then ，all，race，resolve，reject;
接下来让我们一步一步解析这几个方法
首先我们需要初始化一个promise对象

let promise = new Promise((resolve,reject)=>{
     console.log('promise对象创建成功')  //promise对象创建成功    
         console.log(resolve)       // ƒ () { [native code] } ƒ () { [native code] }
  })
      console.log('promise对象下面执行的操作')  //promise对象下面执行的操作

image.png

可见promise里的resolve，reject是两个函数，一个成功回调，一个失败回调 。

let promise = new Promise((resolve,reject)=>{
            const num=Math.random()*10;
             if(num>5){
                resolve('成功回调-num='+num)
             }else{
                reject('失败回调-num='+num)
             }
        })
        promise.then((resolve)=>{
            console.log(resolve)  //成功回调
        },(reject)=>{
            console.log(reject)  //失败回调
        })

Promise 实例 调用then方法，里面有两个回调函数，第一个代表是成功回调，第二个代表失败回调，第二个回调函数可以省略，用catch来代替、结果是一样的,成功回调函数里抛出的错误，catch也是能捕获到的。

let promise = new Promise((resolve,reject)=>{
            const num=Math.random()*10;
             if(num>5){
                resolve('成功回调-num='+num)
             }else{
                reject('失败回调-num='+num)
             }
        })
        promise.then((resolve)=>{
            console.log(resolve)
        }).catch((reject)=>{
             console.log(reject)
        })

当promise执行完成功回调，或者失败回调之后，都会执行finally里的函数。

 let promise = new Promise((resolve,reject)=>{
            const num=Math.random()*10;
             if(num>5){
                resolve('成功回调-num='+num)
             }else{
                reject('失败回调-num='+num)
             }
        })
        promise.then((resolve)=>{
            console.log(resolve)
        }).catch((reject)=>{
             console.log(reject)
        }).finally(()=>{
            console.log('最后执行的函数')
        })

Promise对象的all，和race 方法类似，一个是promise实例全部执行完成后执行，另一个则是只要有一个实例完成之后就执行then方法里的回调函数

    let p1 = new Promise((resolve,reject)=>{
            const num=Math.random()*10;
            console.log('直接执行的p1')
            setTimeout(()=>{
                 if(num>5){
                resolve('p1->promise对象，成功回调-num='+num)
             }else{
                reject('p1->promise对象，失败回调-num='+num)
             }
            },2000)
            
        })
         let p2 = new Promise((resolve,reject)=>{
            console.log('直接执行的p2')  
            const num1=Math.random()*10;
              setTimeout(()=>{
             if(num1>5){
                resolve('p2->promise对象，成功回调-num1='+num1)
             }else{
                reject('p2->promise对象，失败回调-num=1'+num1)
             }
             },1000)
        })
    
    Promise.race([p1,p2]).then((result)=>{
         console.log(result,'成功一个')
    }).catch((error)=>{
         console.log(error,'失败一个')
    })

image.png

 let p1 = new Promise((resolve,reject)=>{
            const num=Math.random()*10;
            console.log('直接执行的p1')
            setTimeout(()=>{
                 if(num>5){
                resolve('p1->promise对象，成功回调-num='+num)
             }else{
                reject('p1->promise对象，失败回调-num='+num)
             }
            },2000)
            
        })
        p1.then((result)=>{
            console.log(result)
        }).catch((error)=>{
                console.log(error)
        })
         let p2 = new Promise((resolve,reject)=>{
            console.log('直接执行的p2')  
            const num1=Math.random()*10;
              setTimeout(()=>{
             if(num1>5){
                resolve('p2->promise对象，成功回调-num1='+num1)
             }else{
                reject('p2->promise对象，失败回调-num=1'+num1)
             }
             },1000)
        })
     p2.then((result)=>{
            console.log(result)
        }).catch((error)=>{
                console.log(error)
        })
        
    Promise.all([p1,p2]).then((result)=>{
         console.log(result+'成功一个')
    },(error)=>{
        console.log(error+'失败一个')
    })

如果两个都是resolve对象，则result返回的是一个数组，里面是两个result的参数，因为我拼接了字符串，所有打印的结果是字符串，
如果其中有个是失败回调，则会调用则会调用all方法里的失败回调，一旦p1实例，或者p2实例触发reject方法，则会立即调用all方法里的失败回调。
这个是失败回调

image.png
这个是成功回调
image.png

为方便查看输出数据形式，我把拼接的字符串改成了,

Promise.all([p1,p2]).then((result)=>{
         console.log(result,'成功一个')
    }).catch((error)=>{
         console.log(error,'失败一个')
        
    })

还有Promise.resolve，Promise.reject

        let p1 = Promise.resolve('这就是个成功的回调函数')
        p1.then((resolve)=>{
             console.log(resolve)  //  这就是个成功的回调函数
        })
              let p2 = Promise.reject('这就是个失败的回调函数')
        p2.then(resolve=>{    
        },(reject)=>{
             console.log(reject)  //  这就是个失败的回调函数
        })

失败回调函数在then方法的第二个参数里定义的，如果不写第二个参数，虽然也能输出，但是控制台会显示未捕获reject,要想正常输出失败回调，要么在then里写两个回调函数，要么直接catch捕获错误。
可见Promise.resolve等价于new Promise(resolve => resolve())
Promise.reject等价于new Promise((resolve, reject) => reject())