快捷導(dǎo)航

ES6中promise詳解及用法實例

更新時間：2022年11月28日 09:07:43 作者：Cirrod

Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大,下面這篇文章主要給大家介紹了關(guān)于ES6中promise詳解及用法的相關(guān)資料,需要的朋友可以參考下

一、什么是Promise

Promise是ES6異步編程的一種解決方案(目前最先進的解決方案是async和await的搭配（ES8），但是它們是基于promise的)，從語法上講，Promise是一個對象或者說是構(gòu)造函數(shù)，用來封裝異步操作并可以獲取其成功或失敗的結(jié)果。

二、為什么要使用promise

最重要也是最主要的一個場景就是ajax和axios請求。通俗來說，由于網(wǎng)速的不同，可能你得到返回值的時間也是不同的，但是我們下一步要執(zhí)行的代碼依賴于上一次請求返回值，這個時候我們就需要等待，結(jié)果出來了之后才知道怎么樣繼續(xù)下去。

三、promise的好處

1.可以避免多層異步調(diào)用嵌套問題(回調(diào)地獄)
2.Promise 對象提供了簡潔的API，使得控制異步操作更加容易（js執(zhí)行機制導(dǎo)致的異步問題）
這兩點在我ES6專欄的相關(guān)文章有很詳細(xì)的介紹，這里就不展開了

四、promise的三種狀態(tài)

Promise對象有三種狀態(tài)，他們分別是：

1.pending: 等待中，或者進行中，表示還沒有得到結(jié)果

2.resolved(Fulfilled): 已經(jīng)完成，表示得到了我們想要的結(jié)果，可以繼續(xù)往下執(zhí)行

3.rejected: 也表示得到結(jié)果，但是由于結(jié)果并非我們所愿，因此拒絕執(zhí)行

這三種狀態(tài)不受外界影響，而且狀態(tài)只能從pending改變?yōu)閞esolved或者rejected，并且不可逆

五、promise的用法

1.promise的實例方法

①then()得到異步任務(wù)的正確結(jié)果

②catch()獲取異常信息

③finally()成功與否都會執(zhí)行(尚且不是正式標(biāo)準(zhǔn))

注意：then方法可以接受兩個函數(shù)，第一個函數(shù)為promise狀態(tài)為成功的回調(diào)函數(shù)，第二個函數(shù)為promise狀態(tài)為失敗的回調(diào)函數(shù)（可以不寫，一般用catch方法捕獲promise狀態(tài)為失敗的異常信息）

2.promise的對象方法(p1,p2,p3為promise的實例對象)

①Promise.all()并發(fā)處理多個異步任務(wù)，所有任務(wù)都執(zhí)行完成才能得到結(jié)果

Promise.all( [p1,p2,p3] ) .then ( (result) => {consoleog (result)
})

②Promise.race()并發(fā)處理多個異步任務(wù)，只要有一個任務(wù)完成就能得到結(jié)果

Promise.race ( [p1,p2,p3] ).then ( (result)=>{
console. log (result)
})

六、promise的特點

1.在Promise對象的構(gòu)造函數(shù)中，將一個函數(shù)作為第一個參數(shù)。

2.而Promise對象的構(gòu)造函數(shù)的第一個參數(shù)中的這個函數(shù)，就是用來處理Promise的狀態(tài)變化，這個函數(shù)的第一個參數(shù)表示promise的狀態(tài)為成功，第二個參數(shù)表示promise的狀態(tài)為失敗，這兩個參數(shù)（名字可以自己命名）都為一個函數(shù)，他們的作用分別是將promise狀態(tài)修改為resolved(成功)和rejected（失?。?。

    <script>
        function fn(flag) {
            //構(gòu)造函數(shù)
               return new Promise(function(resolve, reject) {
                if (flag === true) {
                    resolve('promise狀態(tài)為成功！')
                };
                if (flag === false) {
                    reject('promise狀態(tài)失??！')
                };
            })
        }
 
        console.log(fn(true));
    </script>

控制臺運行：

3. Promise對象中的then方法，可以接收構(gòu)造函數(shù)中處理的狀態(tài)變化，并分別對應(yīng)執(zhí)行。then方法有2個函數(shù)參數(shù)，第一個函數(shù)接收resolved(promise狀態(tài)為成功)的執(zhí)行，第二個函數(shù)接收reject(promise狀態(tài)為失敗)的執(zhí)行。

    <script>
        function fn(flag) {
            return new Promise(function(resolve, reject) {
                if (flag === true) {
                    resolve('promise狀態(tài)為成功！')
                };
                if (flag === false) {
                    reject('promise狀態(tài)失?。?)
                };
            }).then(function(res) {
                    console.log(res);
                },
                function(err) {
                    console.log(err);
                })
        }
        fn(true)
        fn(false)
    </script>

控制臺運行：

4.promise的狀態(tài)只能從未完成->完成, 未完成->失敗且狀態(tài)不可逆轉(zhuǎn)。

promise的異步結(jié)果，只能在完成狀態(tài)時才能返回，而且我們在開發(fā)中是根據(jù)結(jié)果來選擇來選擇狀態(tài)的，然后根據(jù)狀態(tài)來選擇是否執(zhí)行then()。

實例化的Promise內(nèi)部會立即執(zhí)行，then方法中的異步回調(diào)函數(shù)會在腳本中所有同步任務(wù)完成時才會執(zhí)行。因此，promise的異步回調(diào)結(jié)果最后輸出。示例代碼如下：

var promise = new Promise(function(resolve, reject) {
  console.log('Promise instance');
  resolve();
});
 
promise.then(function() {
  console.log('resolved result');
});
for(var i=0;i<100;i++) {
console.log(i);
/*
Promise instance
1
2
3
...
99
100
resolved result
*/

5.Promise.then（）方法

①then()函數(shù)返回的實際也是一個Promise對象（無論函數(shù)內(nèi)部返回什么類型的數(shù)據(jù)，函數(shù)都會進行加工返回一個promise對象）

    <script>
        function fn(flag) {
            return new Promise(function(resolve, reject) {
                if (flag === true) {
                    resolve('promise狀態(tài)為成功！')
                };
                if (flag === false) {
                    reject('promise狀態(tài)失??！')
                };
            })
        }
        console.log(fn(true).then());
    </script>

控制臺運行：

②then()函數(shù)內(nèi)部返回為普通值（非Promise類型的屬性），返回的普通值會直接傳遞給下一個then，通過then參數(shù)中函數(shù)的參數(shù)接收該值。

這時then()函數(shù)返回的Promise對象狀態(tài)為成功（resloved），then（）函數(shù)的返回值為對象的成功值，如return 123，返回的Promise對象值為123，如果沒有返回值，是undefined

    <script>
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('用戶數(shù)據(jù)');
            })
        });
        let result = p.then(value => {
            return 123;
        }, reason => {
            console.log(reason)
        })
        console.log(result);
        result.then(function(res) {
            console.log(res);
        })
    </script>

控制臺運行：

③ 當(dāng)then()函數(shù)內(nèi)部返回的是Promise類型的對象時，then（）函數(shù)的返回的Promise對象的狀態(tài)值為這個Promise對象的狀態(tài)值，成功值也是如此，返回的該promise對象會調(diào)用下一個then方法。

    <script>
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('用戶數(shù)據(jù)');
            })
        });
        let result = p.then(value => {
            return new Promise((resolve, reject) => {
                resolve('ok')
            })
        }, reason => {
            console.log(reason)
        })
        console.log(result);
        result.then(function(res) {
            console.log(res);
        })
    </script>

控制臺運行：

④當(dāng)then()函數(shù)內(nèi)部果拋出異常，則then（）函數(shù)的返回值狀態(tài)也是rejected

    <script>
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('用戶數(shù)據(jù)');
            })
        });
        let result = p.then(value => {
            throw 123
        }, reason => {
            console.log(reason)
        })
        console.log(result);
    </script>

控制臺運行：

6.Promise.catch（）方法

①catch（）函數(shù)只有一個回調(diào)函數(shù)，意味著如果Promise對象狀態(tài)為失敗就會調(diào)用catch（）方法并且調(diào)用回調(diào)

//catch（）函數(shù)只有一個回調(diào)函數(shù)，意味著如果Promise對象狀態(tài)為失敗就會調(diào)用catch（）方法并且調(diào)用回調(diào)函數(shù)
<script>
const p = new Promise((resolve, reject) => {
setTimeout(()=>{
reject('出錯啦')
},1000)
})
 
p.catch(reason => {
console.log(reason)
})
</script>

控制臺運行：