Promise介紹

1. Promise是一個(gè)構(gòu)造函數(shù)墓猎，既然是構(gòu)造函數(shù)姨夹，那么我們就可以new Promise() 得到一個(gè)Promise實(shí)例肉迫；
2. Promise是模擬一些異步操作弄跌，對(duì)一些異步操作進(jìn)行封裝。（處理一些回調(diào)地獄）
3. 在Promise上虏两，有兩個(gè)函數(shù)愧旦，分別是resolve（成功后回調(diào)函數(shù)）reject(失敗后回調(diào)函數(shù))
4. 在Promise構(gòu)造函數(shù)的 prototype 屬性上， 有一個(gè)then() 方法, 也就是說(shuō)碘举，只要是Promise 構(gòu)造函數(shù)創(chuàng)建的實(shí)例忘瓦，都可以訪問(wèn).then()方法 ， 還有一個(gè)catch()方法鏈?zhǔn)讲僮鲿r(shí)候 當(dāng)某一個(gè)Promise報(bào)錯(cuò)時(shí) 后續(xù)的Promise都會(huì)停止操作引颈；
5. 既然Promise的實(shí)例，是一個(gè)異步操作境蜕，那么蝙场，這個(gè)異步操作的結(jié)果只有兩種狀態(tài)
   5.1 狀態(tài)1： 異步執(zhí)行成功回調(diào) resolve(success) 把成功的結(jié)果返回給調(diào)用者
   5.2 狀態(tài)2： 異步執(zhí)行失敗回調(diào) reject（err）把失敗的結(jié)果返回給調(diào)用者
   5.3 由于Promise的實(shí)例，是一個(gè)異步操作粱年，所以內(nèi)部拿到的結(jié)果后 不能return 把操作的結(jié)果返回給調(diào)用者售滤； 這個(gè)時(shí)候，只能用回調(diào)函數(shù)形式台诗，來(lái)把成功或失敗的值 返回給調(diào)用者完箩；
   6.我們可以在new 出來(lái)的promise 實(shí)例上，調(diào)用 .then() 方法拉队，【預(yù)先】為這個(gè)Promise 異步操作弊知，指定成功 resolve 和失敗后 reject 回調(diào)函數(shù)

什么時(shí)候用到異步操作呢？

1. 網(wǎng)絡(luò)請(qǐng)求的時(shí)候粱快，要等響應(yīng)服務(wù)后秩彤，得到服務(wù)器內(nèi)容，才能回調(diào)函數(shù)

模擬ajax setTimeout 把它看作ajax
//回調(diào)地獄

   setTimeout(() => {
        console.log('Hello world');
        setTimeout(() => {
            console.log('Hello Vue.js');
            setTimeout(()=>{
                console.log('Hello javascript');
            },1000)
        },1000)
    },1000);

通過(guò)promise 解決回調(diào)地獄

   new Promise((resolve, reject) => {
        setTimeout(() => {
            //模擬ajax
            //ajax成功時(shí) 調(diào)用 resolve() 然后執(zhí)行then() 把data傳過(guò)去
            resolve('Hello World');

            //ajax失敗時(shí)調(diào)用reject() 然后執(zhí)行catch()
            reject('error')
        },1000);
    }).then((data) => {
        console.log(data);
    }).catch((error) => {
        console.log(error);
    })

Promise 鏈?zhǔn)讲僮?/h3>

new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('111');
        }, 10)
    }).then(data => {
        console.log(data);
        return new Promise((resolve, reject) => {
            resolve(data + ' ' + '222');
        })
    }).then(data => {
        console.log(data);
        return new Promise((resolve, reject) => {
            resolve(data + ' ' +  '333')
        })
    }).then(data => {
        console.log(data);
    });

//上面鏈?zhǔn)讲僮鞔a簡(jiǎn)寫

 new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('111');
        }, 10)
    }).then(data => {
        console.log(data);
        return Promise.resolve(data + ' ' + 222)
    }).then(data => {
        console.log(data);
        return Promise.resolve(data + ' ' + 333)
    }).then(data => {
        console.log(data);
    });

//更加的簡(jiǎn)寫

   new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('111');
        }, 10)
    }).then(data => {
        console.log(data);
        //內(nèi)部會(huì)返回一個(gè)promise.resolve()
        //如果這里是reject 就進(jìn)入catch方法
        return Promise.reject('err');
        //return data + ' ' + 222
    }).then(data => {
        console.log(data);
        //內(nèi)部會(huì)返回一個(gè)promise.resolve()
        return data + ' ' + 333
    }).then(data => {
        console.log(data);
    }).catch(err => {
        console.log(err);
    })

Promise.all 方法使用

//判斷兩個(gè)異步是否請(qǐng)求完事哭，請(qǐng)求完后漫雷，統(tǒng)一then
// res[0] 獲取第一個(gè)resolve
// res[1] 獲取第二個(gè)resolve

    Promise.all([
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('res1');
            }, 100)
        }),
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('res2');
            }, 100)
        }),
    ]).then(res => {
        console.log(res[0]); //res1
        console.log(res[1]); //res2
    })