好程序員-千鋒教育旗下高端IT職業(yè)教育品牌
官方微信
2023-03-28
promise ■ 失敗
●Promise
是一種異步代碼的封裝方案
因為換了一種封裝方案, 不需要安裝回調(diào)函數(shù)的方式去調(diào)用, 需要按照 promise 的形式去調(diào)用
注意 promise 不是解決 異步問題的, 而是解決回調(diào)地獄問題的
●認識 Promise
○promise 的三種狀態(tài)
■持續(xù): pending
■成功: fulfilled
■失敗: rejected
○promise 的兩種轉(zhuǎn)換
■從持續(xù)轉(zhuǎn)為成功
■從持續(xù)轉(zhuǎn)為失敗
○promise 的基礎(chǔ)語法
■ES6 內(nèi)置構(gòu)造函數(shù)
○promise 的語法
■const p = new Promise(function () {})
○promise 對象可以觸發(fā)的兩個方法
■p.then(函數(shù)); 成功時執(zhí)行
■p.catch(函數(shù)); 失敗時執(zhí)行
●promise 封裝一個異步函數(shù)
const p = new Promise(function (resolve, reject) {
// resolve: 是一個形參, 名字自定義, 值是一個函數(shù), 當你調(diào)用的時候, 會把當前 promise 的狀態(tài)轉(zhuǎn)換為 成功
// reject: 是一個形參, 名字自定義, 值是一個函數(shù), 當你調(diào)用的時候, 會把當前 promise 的狀態(tài)轉(zhuǎn)換為 失敗
// resolve 和 reject 調(diào)用時可以傳遞一個參數(shù), 這個參數(shù)會被傳遞給對應(yīng)的 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 為函數(shù)
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) {
// 這個函數(shù)執(zhí)行代碼 promise 狀態(tài)為成功狀態(tài)!!!
console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");
});
res.catch(function (type) {
// 這個函數(shù)執(zhí)行代碼
console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");
});
●promise 的鏈式調(diào)用
fn()
.then(function (type) {
// 這個函數(shù)執(zhí)行代碼 promise 狀態(tài)為成功狀態(tài)!!!
console.log("因為", type, "謝謝班長, 我準備了20個bug, 回饋給你");
})
.catch(function (type) {
// 這個函數(shù)執(zhí)行代碼
console.log("因為", type, "謝謝班長, 我準備了800個bug, 開心死你");
});
●promise 的調(diào)用方式補充
○如果你在第一個 then 里面返回(return) 一個新的 promise 對象的時候
○可以在第一個 then 后面, 繼續(xù)第二個 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 執(zhí)行結(jié)束, 我都會執(zhí)行
fn()
.then(function (res) {
console.log("成功");
})
.catch(function (res) {
console.log("失敗");
})
.finally(function () {
console.log(
"不管promise是成功還是失敗, 只要 promise 執(zhí)行結(jié)束, 我都會執(zhí)行"
);
});
Promise 本身還有一些方法
○all:
■作用: 可以同時觸發(fā)多個 promise 行為
●只有所有的 promise 都成功的時候, all 才算成功
●只要任何一個 promise 失敗的時候, all 就算失敗了
■語法: Promise.all([多個 promise])
○race:
■作用: 可以同時觸發(fā)多個 promise 行為
●按照速度計算, 當?shù)谝粋€結(jié)束的時候就結(jié)束了, 成功或失敗取決于第一個執(zhí)行結(jié)束的 promise
■語法: Promise.race([多個 promise])
○allSettled
■作用: 可以同時觸發(fā)多個 Promise 行為
●不管多個成功還是失敗都會觸發(fā)
●會在結(jié)果內(nèi)以數(shù)組的形式給你返回 每一個 promise 行為的成功還是失敗
■語法: Promise.allSettled([多個 promise])
○resolve
■作用: 強制返回一個成功狀態(tài)的 promise 對象
○reject
■作用: 強制返回一個失敗狀態(tài)的 promise 對象
// 1. all
Promise.all([fn(), fn(), fn()])
.then(function () {
console.log("所有的 參數(shù) 都返回 成功狀態(tài)");
})
.catch(function () {
console.log("這些參數(shù)中, 有一個 為 失敗狀態(tài)");
});
// 2. race
Promise.race([fn(), fn(), fn()])
.then(function () {
console.log("速度最快的那個執(zhí)行完畢, 并且是成功狀態(tài)時 執(zhí)行");
})
.catch(function () {
console.log("速度最快的那個執(zhí)行完畢, 并且是失敗狀態(tài)時 執(zhí)行");
});
// 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("失敗");
});
掃碼開啟架構(gòu)師蛻變之旅 >>
開班時間：2021-04-12（深圳）
開班盛況開班時間：2021-05-17（北京）
開班盛況開班時間：2021-03-22（杭州）
開班盛況開班時間：2021-04-26（北京）
開班盛況開班時間：2021-05-10（北京）
開班盛況開班時間：2021-02-22（北京）
開班盛況開班時間：2021-07-12（北京）
預(yù)約報名開班時間：2020-09-21（上海）
開班盛況開班時間：2021-07-12（北京）
預(yù)約報名開班時間：2019-07-22（北京）
開班盛況
Copyright 2011-2023 北京千鋒互聯(lián)科技有限公司 .All Right
京ICP備12003911號-5
京公網(wǎng)安備 11010802035720號
