1. 了解Promise

mounted(){
      // 1. 基本用法  執(zhí)行完testPromise 后執(zhí)行 testPromise1  整個執(zhí)行完 用了 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)
        })
        //輸出   
        // 三秒執(zhí)行結果
        // 三秒后的輸出結果
        // 六秒執(zhí)行結果
        // 六秒后的輸出結果
    
        // 2. 都知道promise構造函數是可以在函數的后面 無線 .then  但是.then 怎么拿到上一個.then的返回值呢？
        //  錯誤用法  此用法輸出順序為   三秒執(zhí)行結果  三秒后的輸出結果  六秒執(zhí)行結果  六秒后的輸出結果  undefined 
        // 執(zhí)行完成  需要 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
        })
        //  正確用法  打印順序為  三秒執(zhí)行結果  三秒后的輸出結果  六秒執(zhí)行結果  六秒后的輸出結果  
        //  執(zhí)行完成  需要 9秒
        this.testPromise().then((res) => {
            console.log(res)
            return this.testPromise1()
        }).then((res) => {
            console.log(res)
        })
      
        // 3. Promise.all 的用法
        // all 中的兩個promise異步 是同時開始執(zhí)行的  then中的返回值是等待最后一個執(zhí)行完才會輸出結果
        //  執(zhí)行順序為  三秒執(zhí)行結果  六秒執(zhí)行結果   ["三秒后的輸出結果", "六秒后的輸出結果"]  
        //  執(zhí)行完成  需要 6秒
        Promise.all([this.testPromise(),this.testPromise1()]).then((res) => {
            //這里輸出的 res 是testPromise()，testPromise1()  resolve 返回值的 集合
            console.log(res)
        })

        // 4. Promise.race的用法
        //race 中的兩個promise異步 是同時開始執(zhí)行的，then中的返回值是最先完成異步的返回值
        //這個方法的使用場景：可用于超時操作，設置一個請求超時的時間，如果先返回超時的函數，說明超時
        // 執(zhí)行 順序  三秒執(zhí)行結果  三秒后的輸出結果  六秒執(zhí)行結果
         //  執(zhí)行完成  需要 6秒
        Promise.race([this.testPromise(),this.testPromise1()]).then((res) => {
            //res 是最先執(zhí)行完異步所返回的值
            console.log(res)
        })
},
methods: {
    testPromise(){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('三秒執(zhí)行結果')
                    resolve('三秒后的輸出結果')
                }, 3000)
            })
        },
        testPromise1(){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('六秒執(zhí)行結果')
                    resolve('六秒后的輸出結果')
                }, 6000)
            })
        }
}

2. 循環(huán)多個 Promise 異步函數

// 輸出結果為  [ 0, 1, 2 ]  執(zhí)行了 3 秒
// 此方法用在  一個循環(huán)體中，拿到每個異步請求返回的值 ， 并等待循環(huán)中的 所有異步函數執(zhí)行完，再進行下一步操作！
//  如 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)
            })
        }
}