Javascript 標準內置對象Promise使用學習總結
Javascript標準內置對象Promise使用學習總結數組
by:授客 QQ：1033553122promise
- 1. 基礎用法
var condition = true;異步
let p = new Promise(function(resolve, reject){ // resolve, reject爲兩個回調函數，分別供使用者在函數執行成功和執行失敗時調用函數
if (condition) { // 一些執行成功、失敗的判斷條件，暫且使用上述變量替代學習
// throw "exception"; // 若是此處代碼代碼未註釋，即拋出異常,該異常值 exception將被傳遞給promiseObj.then函數參數列表中第二個參數--一個回調函數spa
resolve("執行成功"); // 若是resolve函數被調用，其函數實參將被傳遞給promiseObj.then函數參數列表中第一個參數--一個回調函數對象
} else {ip
// throw "exception"; // 若是此處代碼代碼未註釋，即拋出異常,該異常值 exception將被傳遞給promiseObj.then函數參數列表中第二個參數--一個回調函數get
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執行成功";
}, (err) => {
console.log(err);
return "then執行失敗";
}).then(data => {//此處then函數接收兩個參數--兩個函數，分別在前一個then函數執行成功和執行失敗時被調用。(前一個then函數參數列表中任意一個函數被調用，而且執行沒拋出異常，表示執行成功，不然表示執行失敗)。第一個函數的參數接收來自前一個then函數執行成功時的函數返回值，若是沒有返回值則爲undefined，第二個函數的參數接收來自前一個then函數執行失敗時的函數返回值，若是沒有返回值則爲undfined，或者是then函數執行時拋出的異常值。
console.log("error:" + data);
}, err => {
console.log(err);
})
}
testFunc(true)
運行結果，控制檯輸出：
"執行成功"
"then執行成功"
testFunc(false)
"執行失敗"
"error:then執行失敗"
- 3. 鏈式調用之.catch
.catch將在new Promise時定義的匿名函數執行失敗、.then函數執行失敗，而且位於其後的then函數沒有顯示提供第二個參數（供失敗時調用的函數）時被調用。能夠簡單理解爲用於捕獲前面發生的，且沒有被任何then函數處理的錯誤。
例1：
function testFunc(condition){
new Promise(function(resolve, reject){
if (condition) {
resolve("執行成功");
} else {
reject("執行失敗");
}
}).then(data => {
console.log(data);
}, err => {
console.log(err);
}).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
- 1. js002---- 標準內置對象
- 2. JavaScript內建對象總結
- 3. JavaScript-Promise對象
- 4. JavaScript 標準之 Map對象
- 5. javascript標準對象與包裝對象
- 6. JavaScript學習總結 之對象
- 7. JavaScript學習總結——this對象
- 8. JavaScript學習總結--建立對象
- 9. JavaScript學習總結--建立對象（2）
- 10. JavaScript學習總結5--事件對象
- 更多相關文章...
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • Web 標準 - 網站建設指南
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。