上一篇介紹了Promise的一些基本用法和串聯，這一篇具體講一下它的API，包括上篇使用的then和catch，以及擴充的靜態成員finally和幾個靜態成員。

---

目錄

1.實例成員

1）then

2）catch

3）finally

2.靜態成員

1）resolve(數據)

2）reject(數據)

3）all(iterable)：

4）race(iterable)

---

1.實例成員

1）then

注冊一個后續處理函數，當Promise為resolved狀態時運行該函數

2）catch

注冊一個后續處理函數，當Promise為rejected狀態時運行該函數

3）finally

注冊一個后續處理函數(無參)，當Promise為已解決階段時運行該函數

即，resolved狀態執行then和finally注冊的函數，rejected狀態執行catch和finally注冊的函數，切記，finally注冊的函數是不能傳遞參數的，例子如下：

【例1】

const pro = new Promise((resolve, reject) => {if (Math.random() > 0.5) {resolve(1)} else {reject(2)} }) pro.then(resp => console.log('then:',resp)); pro.catch(err => console.log('catch:',err)); pro.finally(() => console.log('finally'));

【結果】當事件推向resolve狀態時，打印結果如圖1-1

圖1-1

?當事件推向rejected狀態時，打印結果如圖1-2

圖1-2

2.靜態成員

1）resolve(數據)

該方法返回一個resolved狀態的Promise，傳遞的數據作為狀態數據【例2-1】

【注】如果傳遞的數據是Promise，則直接返回傳遞的Promise對象【例2-2】

【例2-1】

const pro = Promise.resolve(1); pro.then(resp => {console.log('resp:',resp); })

以上代碼等價于下列代碼

const pro = new Promise((resolve, reject) => {resolve(1); }) pro.then(resp => {console.log('resp:',resp); })

?【結果】上述兩段代碼的打印結果均如圖1-2-1

圖2-1

2）reject(數據)

該方法返回一個rejected狀態的Promise，傳遞的數據作為狀態數據，與resolve()相似，這里就不再舉例子了

3）all(iterable)：

• 該方法返回一個新的Promise對象，該Promise對象在iterable參數對象里所有的Promise對象都成功的時候觸發【例3-1】，一旦有任何一個iterable里面的Promise對象失敗則立即觸發該Promise對象的失敗【例3-2】；
• 這個新的Promise對象在觸發成功狀態以后，會把一個包含iterable里所有Promise返回值的數組作為成功回調的返回值，順序跟iterable的順序保持一致，這里參考【例3-1】；
• 如果這個新的Promise對象觸發了失敗狀態，它會把iterable里第一個觸發失敗的Promise對象的錯誤信息作為它的失敗錯誤信息，這里參考【例3-2】

【注】Promise.all方法常被用于處理多個Promise對象的狀態集合。

這里舉一個查看班級內所有同學都通過考試的例子，來說明以上三點

【例3】

//在最大值和最小值之間隨機產生一個數字 function getRandom(min, max) {return Math.floor(Math.random() * (max - min) + min); } //查看該學生的成績是否合格 function passExam(studentId, grade) {return new Promise((resolve, reject) => {console.log(`學生${studentId}開始查成績`);setTimeout(() => {if (grade <= 100 && grade >= 60) {console.log(`學生${studentId}通過了考試`);resolve(true);} else if (grade < 60 && grade >= 0) {console.log(`學生${studentId}沒有通過考試`);resolve(false);} else {reject(`學生${studentId}成績有誤`)}}, getRandom(1000, 3000));}) } //查看該班級所有學生的成績是否均合格 function ifAllStudentsPassExam(gradeList) {const proms = []; //記錄所有學生的查成績結果let passNum = 0; //通過考試的人數let unPass = 0; //沒有通過考試的人數for (let i = 0; i < gradeList.length; i++) {const pro = passExam(i + 1, gradeList[i]).then(resp => {if (resp) {passNum++;console.log(`${passNum}名學生通過`);} else {unPass++;console.log(`${unPass}名學生沒有通過`)}return resp;}, err => {throw err;})proms.push(pro);}Promise.all(proms).then(results => {console.log(`日志記錄：${results}`)}) }

?【例3-1】當該班級中所有同學的成績都是有效成績，即成績值處在[0,100]內時，proms中所有對象都成功觸發，代碼如下

const gradeArr = [100, 99, 45]; //學生的成績 ifAllStudentsPassExam(gradeArr);

?【結果】當proms中所有對象都成功觸發時，Promise.al(proms)到resolved狀態，執行thenable函數

圖3-1

【例3-2】當班級中學生的成績有無效成績時，代碼如下

const gradeArr = [100, 99, 101]; //學生的成績 ifAllStudentsPassExam(gradeArr);

【結果】

圖3-2

4）race(iterable)

當iterable參數里的任意一個子Promise被成功或失敗后，父Promise馬上也會用子Promise的成功返回值或失敗詳情作為參數調用父Promise綁定的相應句柄，并返回該Promise對象【例4】

【例4】

function getRandom(min, max) {return Math.floor(Math.random() * (max - min)) + min; } const proms = []; for (let i = 0; i < 10; i++) {proms.push(new Promise((resolve, reject) => {setTimeout(() => {if (Math.random() > 0.5) {console.log(i, '完成');resolve(i);} else {console.log(i, '失敗');reject(i);}}, getRandom(1000, 3000));})) } const pro = Promise.race(proms); pro.then(datas=> {console.log('有人完成了',datas); }) pro.catch(err=>{console.log('有人失敗了',err) }) console.log(proms); console.log(pro);

【結果】當有人先完成了，打印結果如下

圖4-1

當有人先失敗了，打印結果如下

圖4-2

?

總結

以上是生活随笔為你收集整理的Promise第二篇：你需要记着的API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。