Javascript标準内置對象Promise使用學習總結
by:授客 QQ：1033553122
- 1. 基礎用法
var condition = true;
let p = new Promise(function(resolve, reject){ // resolve, reject為兩個回調函數，分别供使用者在函數執行成功和執行失敗時調用
if (condition) { // 一些執行成功、失敗的判斷條件，暫且使用上述變量替代
// throw "exception"; // 如果此處代碼代碼未注釋，即抛出異常,該異常值 exception将被傳遞給promiseObj.then函數參數清單中第二個參數--一個回調函數
resolve("執行成功"); // 如果resolve函數被調用，其函數實參将被傳遞給promiseObj.then函數參數清單中第一個參數--一個回調函數
} else {
reject("執行失敗"); // 如果reject函數被調用，其函數實參将被傳遞給promiseObj.then函數參數清單中第二個參數--一個回調函數
}
})
p.then((data) => { // then函數接收兩個參數--兩個函數，分别在構造Promise對象定義的匿名函數（假設為func1）執行成功和執行失敗時被調用(func1函數中，resolve被調用表示匿名函數執行成功，reject被調用、或者函數于resolve，reject被執行前，抛出了異常，表示匿名函數執行失敗)，第一個函數的參數接收來自resolve函數的實參，第二個函數的參數接收來自reject函數的實參、或者是函數抛出的異常值(異常優先于reject、resolve被抛出)
console.log(data);
}, (err) => {
console.log(err);
)
運作結果，控制台輸出：
執行成功
- 2. 鍊式調用之.then
function testFunc(condition){
new Promise(function(resolve, reject){
if (condition) {
resolve("執行成功");
} else {
reject("執行失敗");
}
}).then((data) => {
console.log(data);
return "then執行成功";
return "then執行失敗";
}).then(data => {//此處then函數接收兩個參數--兩個函數，分别在前一個then函數執行成功和執行失敗時被調用。(前一個then函數參數清單中任意一個函數被調用，并且執行沒抛出異常，表示執行成功，否則表示執行失敗)。第一個函數的參數接收來自前一個then函數執行成功時的函數傳回值，如果沒有傳回值則為undefined，第二個函數的參數接收來自前一個then函數執行失敗時的函數傳回值，如果沒有傳回值則為undfined，或者是then函數執行時抛出的異常值。
console.log("error:" + data);
}, err => {
})
}
testFunc(true)
"執行成功"
"then執行成功"
testFunc(false)
"執行失敗"
"error:then執行失敗"
- 3. 鍊式調用之.catch
.catch将在new Promise時定義的匿名函數執行失敗、.then函數執行失敗，并且位于其後的then函數沒有顯示提供第二個參數（供失敗時調用的函數）時被調用。可以簡單了解為用于捕獲前面發生的，且沒有被任何then函數處理的錯誤。
例1：
}).then(data => {
}).catch(err => {
console.log("error:" + err)
testFunc(false);
例2：
function testFunc(condition){ new Promise(function(resolve, reject){ if (condition) { resolve("執行成功"); } else { reject("執行失敗"); } }).then((data) => { console.log(data); return "then執行成功"; }).then(data => { console.log(data); }).catch(err => { console.log("error:" + err) }) } testFunc(false); 運作結果，控制台輸出： "error:執行失敗" 例3：
function testFunc(condition){ new Promise(function(resolve, reject){ if (condition) { resolve("執行成功"); } else { reject("執行失敗"); } }).catch(err => { console.log("error:" + err) }) } testFunc(false) 運作結果，控制台輸出： "error:執行失敗" - 4. Promise.all
Promise.all(iterable) 方法傳回一個 Promise 執行個體，此執行個體在 iterable 參數内所有的 promise 都“完成（resolved）”或參數中不包含 promise 時回調完成（resolve）；如果參數中 promise 有一個失敗（rejected），此執行個體回調失敗（reject），失敗原因的是第一個失敗 promise 的結果 例： function testFunc1(condition){ return new Promise(function(resolve, reject){ if (condition) { resolve("testFunc1執行成功"); } else { reject("testFunc1執行失敗"); } }); } function testFunc2(condition){ return new Promise(function(resolve, reject){ if (condition) { resolve("testFunc2執行成功"); } else { reject("testFunc2執行失敗"); } }); } let result = Promise.all([testFunc2(true), testFunc1(true)]); result.then((data) => { console.log(data) }).catch(err => { console.log(err); }) 運作結果，控制台輸出如下内容： Array ["testFunc2執行成功", "testFunc1執行成功"] let result = Promise.all([testFunc2(false), testFunc1(true)]); result.then((data) => { console.log(data) }).catch(err => { console.log(err); }) 運作結果，控制台輸出如下内容： "testFunc2執行失敗" 說明：可以利用.all的特性，以并行執行多個異步操作，并且在一個回調中處理所有的傳回資料（傳回資料的順序和傳入參數數組的順序對應） 參考連結： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all 作者：授客
QQ：1033553122
全國軟體測試QQ交流群：7156436
Git位址：https://gitee.com/ishouke
友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額随意，您的支援将是我繼續創作的源動力，打賞後如有任何疑問，請聯系我!!!
微信打賞
支付寶打賞 全國軟體測試交流QQ群
