文章主要涉及關(guān)于promise的方法使用，不會(huì)涉及太多理論性的東西，簡(jiǎn)單的講講它的方法調(diào)用，好廢話不多說(shuō)，直接看代碼

本章涉及以下幾點(diǎn)

• 如何創(chuàng)建一個(gè)Promise對(duì)象
• 參數(shù)講解
• 鏈?zhǔn)秸{(diào)用
• catch()捕捉異常
• Promise.all()方法講解
• Promise.race() 方法講解
• 手動(dòng)的更改狀態(tài) Promise.resolve() | Promise.reject()

如何創(chuàng)建promise對(duì)象

創(chuàng)建一個(gè)promise對(duì)象很簡(jiǎn)單 直接看代碼

const p1 = new Promise((resolve,reject) => {
    const value = 'hello';
    resolve(value);
});

像上面這樣就簡(jiǎn)單的創(chuàng)建了一個(gè)promise對(duì)象

參數(shù)講解

const p1 = new Promise((resolve,reject) => {
    if(true){
            resolve('success')
   }else{
          reject('err')
    }
});

上面的例子中傳了兩個(gè)參數(shù)：

• reslove 成功的狀態(tài)
• reject 失敗的狀態(tài)

他們兩個(gè)執(zhí)行的方法里都可以傳一個(gè)值，即成功傳入和失敗傳入 。下面我們看下鏈?zhǔn)秸{(diào)用

鏈?zhǔn)秸{(diào)用

先看一段代碼 ：

const p1 = new Promise((resolve,reject) => {
    const value = 'hello';
    resolve(value);  // 此時(shí)觸發(fā)成功 
       //reject(value);  // 如果是失敗 同時(shí)我們也傳入value
});

p1.then(data => {
    console.log(data);  // hello
    return data+'world';
}, err => {
    console.log(err);   // 返回的是 reject(value) 的值
    return err+'err';
}).then(data => {
    console.log(data); // helloworld 繼續(xù)上一次data的返回值  如果沒(méi)有 就返回undefined
},err => {
    console.log(err);       // helloerr 同理 繼續(xù)返回上一次err的返回值
})

通過(guò)代碼我們很容易理解它們的作用

catch 捕捉異常

通常我們不會(huì)在then方法多傳入一個(gè)參數(shù)而是用catch來(lái)捕捉錯(cuò)誤的信息 繼續(xù)上面的例子

p1.then(data => {
    console.log(data);
    return data+'world';
}).catch(err => {
    console.log(err);  // hello
    return "reject";
}).then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);  // reject 
})

Promise.all()方法

它傳入一個(gè)promise對(duì)象的列表 直接看代碼

const arr = [1,2,3,4];

const promiseArr = arr.map(arg => {
    return new Promise((resolve,reject) => {
        if(arg) {
            resolve(arg*2);
        }else{
            reject('no value');
        }
    })
});



Promise.all(promiseArr).then(data => {
    console.log(data);  // [2,4,6,8]
}).catch(err => {
    console.log(err); 
})

Promise.race()方法

同樣的它傳入的也是promise對(duì)象列表 不過(guò)他們執(zhí)行順序是按照誰(shuí)快 誰(shuí)先輸出

const pro1 = new Promise((resolve,reject) => {
    setTimeout(resolve,100,'1');
});

const pro2 = new Promise((resolve,reject) => {
    setTimeout(resolve,200,'2');
});

const pro3 = new Promise((resolve,reject) => {
    setTimeout(resolve,300,'3');
});

const pro4 = new Promise((resolve,reject) => {
    setTimeout(resolve,10,'4');
});


Promise.race([pro4,pro1,pro2,pro3]).then(data => {
    console.log(data);  // 1   輸出最快的那個(gè)
}).catch(err => {
    console.log(err);
})

兩種實(shí)例狀態(tài)

Promise.resolve() | Promise.reject() 兩個(gè)方法很容易理解 即手動(dòng)去改變它們的狀態(tài)：

const p_1 = Promise.resolve('success');

p_1.then(data => {
    console.log(data);   // success
})

const p_2 = Promise.reject('err');

p_2.then(data => {
    console.log(data);  
}).catch(err => {
    console.log(err);  // err
})