Promise常用api

一catch的用法

与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的

 function pro() {
            let p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    var num = Math.ceil(Math.random() * 20);
                    console.log('随机数生成的值：', num)
                    if (num <= 10) {
                        resolve(num);
                    } else {
                        reject('数字太于10了即将执行失败回调');
                    }
                }, 2000);
            })
            return p
        }

        pro().then(
            (data) => {
                console.log('resolved成功回调');
                console.log('成功回调接受的值：', data);
            },
           
        ).catch(
         (reason, err) => {
               console.log('catch到rejected失败回调');
               console.log('catch失败执行回调抛出失败原因：',reason)
            }
        );
         pro().then(
            (data) => {
                console.log('resolved成功回调');
                console.log('成功回调接受的值：', data);
            }
        ).catch(
         (reason, err) => {
               console.log('catch到rejected失败回调');
               console.log('catch失败执行回调抛出失败原因：',reason)
            }
        );

效果和写在then的第二个参数里面一样。它将大于10的情况下的失败回调的原因输出，但是，它还有另外一个作用：在执行resolve的回调时，如果抛出异常了，那么并不会报错卡死js，而是会进到这个catch方法中。

function pro() {
            let p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    var num = Math.ceil(Math.random() * 20);
                    console.log('随机数生成的值：', num)
                    if (num <= 10) {
                        resolve(num);
                    } else {
                        reject('数字太于10了即将执行失败回调');
                    }
                }, 2000);
            })
            return p
        }

        pro().then(
            (data) => {
                console.log('resolved成功回调');
                console.log('成功回调接受的值：', data);
                console.log(abc);
            },

        ).catch(
            (reason, err) => {
                console.log('catch到rejected失败回调');
                console.log('catch失败执行回调抛出失败原因：', reason)
            }
        );

在resolve的回调中，我们console.log(abc);而abc这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到上图的结果，也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了

二all用法

all(arr) 这个的方法会返回一个新的promise，如果里面所有的promise对象都成功才会触发，一旦有一个失败 则该promise对象失败

const proms = [];
        for (let i = 0; i < 10; i++) {
            proms.push(new Promise((resolve, reject) => {
                setTimeout(() => {
                    if (Math.random() < 0.9) {
                        console.log(i, "完成")
                        resolve(i)
                    } else {
                        console.log(i, "失败")
                        reject(i)
                    }
                }, 1000)
            }))
        }
        const pro = Promise.all(proms);
        pro.then(data => {
            console.log("全部完成", data)
        })
        pro.catch(err => {
            console.log("又失败的情况", err)
        })

这样以后就可以用all并行执行多个异步操作，并且在一个回调中处理所有的返回数据，比如你需要提前准备好所有数据才渲染页面的时候就可以使用all,执行多个异步操作将所有的数据处理好，再去渲染

三race的用法

race(arr) 当数组中任意一个promise对象完成时，就马上会去使用完成了的promise对象的结果，不管这个结果是成功还是失败

 const proms = [];
        for(let i = 0;i<10;i++){
            proms.push(new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    if(Math.random() < 0.5){
                        console.log(i,"完成")
                        resolve(i)
                    }else{
                        console.log(i,"失败")
                        reject(i)
                    }
                },Random(1000,3000))
            }))
        }
        const pro = Promise.race(proms);
        pro.then(data=>{
            console.log("有一个先完成了",data)
        })
        pro.catch(err=>{
            console.log("有一个先失败的情况",err)
        })
        function Random(min,max){
            return Math.floor(Math.random() * (max-min) + min)
        }