循环多个 Promise 异步函数

1. 了解Promise

mounted(){
      // 1. 基本用法  执行完testPromise 后执行 testPromise1  整个执行完 用了 9 秒
      this.testPromise().then((res) => {
            console.log(res)
            this.testPromise1().then((res1) => {
                console.log(res1)
            }).catch((err1) => {
                console.log(err1)
            })
        }).catch((err) => {
            console.log(err)
        })
        //输出   
        // 三秒执行结果
        // 三秒后的输出结果
        // 六秒执行结果
        // 六秒后的输出结果
    
        // 2. 都知道promise构造函数是可以在函数的后面 无线 .then  但是.then 怎么拿到上一个.then的返回值呢？
        //  错误用法  此用法输出顺序为   三秒执行结果  三秒后的输出结果  六秒执行结果  六秒后的输出结果  undefined 
        // 执行完成  需要 9秒
        this.testPromise().then((res) => {
            console.log(res)
             // 错误用法 then 里面接受不到 testPromise1 的 resolve值
            return this.testPromise1().then((res1) => {
                console.log(res1)
            }).catch((err1) => {
                console.log(err1)
            })
        }).then((res) => {
            console.log(res)   //undefined
        })
        //  正确用法  打印顺序为  三秒执行结果  三秒后的输出结果  六秒执行结果  六秒后的输出结果  
        //  执行完成  需要 9秒
        this.testPromise().then((res) => {
            console.log(res)
            return this.testPromise1()
        }).then((res) => {
            console.log(res)
        })
      
        // 3. Promise.all 的用法
        // all 中的两个promise异步 是同时开始执行的  then中的返回值是等待最后一个执行完才会输出结果
        //  执行顺序为  三秒执行结果  六秒执行结果   ["三秒后的输出结果", "六秒后的输出结果"]  
        //  执行完成  需要 6秒
        Promise.all([this.testPromise(),this.testPromise1()]).then((res) => {
            //这里输出的 res 是testPromise()，testPromise1()  resolve 返回值的 集合
            console.log(res)
        })

        // 4. Promise.race的用法
        //race 中的两个promise异步 是同时开始执行的，then中的返回值是最先完成异步的返回值
        //这个方法的使用场景：可用于超时操作，设置一个请求超时的时间，如果先返回超时的函数，说明超时
        // 执行 顺序  三秒执行结果  三秒后的输出结果  六秒执行结果
         //  执行完成  需要 6秒
        Promise.race([this.testPromise(),this.testPromise1()]).then((res) => {
            //res 是最先执行完异步所返回的值
            console.log(res)
        })
},
methods: {
    testPromise(){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('三秒执行结果')
                    resolve('三秒后的输出结果')
                }, 3000)
            })
        },
        testPromise1(){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('六秒执行结果')
                    resolve('六秒后的输出结果')
                }, 6000)
            })
        }
}

2. 循环多个 Promise 异步函数

// 输出结果为  [ 0, 1, 2 ]  执行了 3 秒
// 此方法用在  一个循环体中，拿到每个异步请求返回的值 ， 并等待循环中的 所有异步函数执行完，再进行下一步操作！
//  如 node.js 中 拿到购物车表的数据，只有商品的id ，没有商品的具体信息， 需要去遍历购物车的表， 再用每一个商品id 去遍历商品表，去拿商品具体信息！
mounted(){
        let array = []
        for(let i=0; i<3; i++){
            array.push(this.testForPromise(i))
        }
        Promise.all(array).then((res) => {
            console.log(res)   // [ 0, 1, 2 ]
        })
},
methods:{
        testForPromise(num){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(num)
                }, 3000)
            })
        }
}