2023-03-28
promise ■ 失敗
●Promise
是一種異步代碼的封裝方案
因為換了一種封裝方案, 不需要安裝回調函數的方式去調用, 需要按照 promise 的形式去調用
注意 promise 不是解決 異步問題的, 而是解決回調地獄問題的
●認識 Promise
○promise 的三種狀態
■持續: pending
■成功: fulfilled
■失敗: rejected
○promise 的兩種轉換
■從持續轉為成功
■從持續轉為失敗
○promise 的基礎語法
■ES6 內置構造函數
○promise 的語法
■const p = new Promise(function () {})
○promise 對象可以觸發的兩個方法
■p.then(函數); 成功時執行
■p.catch(函數); 失敗時執行
●promise 封裝一個異步函數
const p = new Promise(function (resolve, reject) {
// resolve: 是一個形參, 名字自定義, 值是一個函數, 當你調用的時候, 會把當前 promise 的狀態轉換為 成功
// reject: 是一個形參, 名字自定義, 值是一個函數, 當你調用的時候, 會把當前 promise 的狀態轉換為 失敗
// resolve 和 reject 調用時可以傳遞一個參數, 這個參數會被傳遞給對應的 then catch
const timer = Math.ceil(Math.random() * 3000) + 2000;
setTimeout(() => {
if (timer > 3500) {
console.log("買水失敗, 耗時 ", timer);
reject("獎勵一個bug");
} else {
console.log("買水成功, 耗時: ", timer);
resolve("送你十個bug");
}
}, timer);
});
p.then(function (address) {
console.log("班長買水成功咯~~~", address);
});
p.catch(function (address) {
console.log("班長買水失敗咯~~~", address);
});
封裝 promise 為函數
function fn() {
const p = new Promise(function (resolve, reject) {
const timer = Math.ceil(Math.random() * 3000) + 2000;
setTimeout(() => {
if (timer > 3500) {
reject("班長買水失敗");
} else {
resolve("班長買水成功");
}
}, timer);
});
return p;
}
// 將來在使用的時候 res 得到的是 promise 的實例對象 p
const res = fn();
res.then(function (type) {
// 這個函數執行代碼 promise 狀態為成功狀態!!!
console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");
});
res.catch(function (type) {
// 這個函數執行代碼
console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");
});
●promise 的鏈式調用
fn()
.then(function (type) {
// 這個函數執行代碼 promise 狀態為成功狀態!!!
console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");
})
.catch(function (type) {
// 這個函數執行代碼
console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");
});
●promise 的調用方式補充
○如果你在第一個 then 里面返回(return) 一個新的 promise 對象的時候
○可以在第一個 then 后面, 繼續第二個 then
fn()
.then(function (type) {
console.log(
"第一次: 因為",
type,
"謝謝班長, 我準備了20個bug, 回饋給你"
);
return fn();
})
.then(function (type) {
console.log(
"第二次: 因為",
type,
"謝謝班長, 我準備了20個bug, 回饋給你"
);
return fn();
})
.then(function (type) {
console.log(
"第三次: 因為",
type,
"謝謝班長, 我準備了20個bug, 回饋給你"
);
return fn();
})
.catch(function (type) {
console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");
});
●promise 的其他方法
●Promise 實例的 finally 方法
○不管promise是成功還是失敗, 只要 promise 執行結束, 我都會執行
fn()
.then(function (res) {
console.log("成功");
})
.catch(function (res) {
console.log("失敗");
})
.finally(function () {
console.log(
"不管promise是成功還是失敗, 只要 promise 執行結束, 我都會執行"
);
});
Promise 本身還有一些方法
○all:
■作用: 可以同時觸發多個 promise 行為
●只有所有的 promise 都成功的時候, all 才算成功
●只要任何一個 promise 失敗的時候, all 就算失敗了
■語法: Promise.all([多個 promise])
○race:
■作用: 可以同時觸發多個 promise 行為
●按照速度計算, 當第一個結束的時候就結束了, 成功或失敗取決于第一個執行結束的 promise
■語法: Promise.race([多個 promise])
○allSettled
■作用: 可以同時觸發多個 Promise 行為
●不管多個成功還是失敗都會觸發
●會在結果內以數組的形式給你返回 每一個 promise 行為的成功還是失敗
■語法: Promise.allSettled([多個 promise])
○resolve
■作用: 強制返回一個成功狀態的 promise 對象
○reject
■作用: 強制返回一個失敗狀態的 promise 對象
// 1. all
Promise.all([fn(), fn(), fn()])
.then(function () {
console.log("所有的 參數 都返回 成功狀態");
})
.catch(function () {
console.log("這些參數中, 有一個 為 失敗狀態");
});
// 2. race
Promise.race([fn(), fn(), fn()])
.then(function () {
console.log("速度最快的那個執行完畢, 并且是成功狀態時 執行");
})
.catch(function () {
console.log("速度最快的那個執行完畢, 并且是失敗狀態時 執行");
});
// 3. allSettled
Promise.allSettled([fn(), fn(), fn()])
.then(function (res) {
console.log(res);
})
.catch(function (res) {
console.log(res);
});
// 4. resolve
Promise.resolve()
.then(function (res) {
console.log("成功");
})
.catch(function (res) {
console.log("失敗");
});
// 5. reject
Promise.reject()
.then(function (res) {
console.log("成功");
})
.catch(function (res) {
console.log("失敗");
});
開班時間:2021-04-12(深圳)
開班盛況開班時間:2021-05-17(北京)
開班盛況開班時間:2021-03-22(杭州)
開班盛況開班時間:2021-04-26(北京)
開班盛況開班時間:2021-05-10(北京)
開班盛況開班時間:2021-02-22(北京)
開班盛況開班時間:2021-07-12(北京)
預約報名開班時間:2020-09-21(上海)
開班盛況開班時間:2021-07-12(北京)
預約報名開班時間:2019-07-22(北京)
開班盛況
Copyright 2011-2023 北京千鋒互聯科技有限公司 .All Right
京ICP備12003911號-5
京公網安備 11010802035720號