2023-03-29
await 失敗
●async / await
上述我們已經把 promise 的基礎使用掌握了, 但是個人認為, promise 的鏈式調用仍然會有點小問題
就是在使用的時候, 過多的鏈式調用, 對于閱讀體驗來說, 仍然是有一點小問題, 不利于閱讀
所以我們可以 使用 ES6+ 新推出的 async與await, 使用我的異步代碼書寫的更像是同步代碼一樣
●注意: 需要配合的必須是 Promise
●async 關鍵字的用法:
○直接書寫在函數的前面即可, 表示該函數是一個異步函數
○意義: 表示在該函數內部可以使用 await 關鍵字
●await 關鍵字的用法:
○必須書寫在一個有 async 關鍵字的函數內
○await 后面等待的內容必須是一個 promise 對象
○本該使用 then 接受的結果, 可以直接定義變量接受了
●常規的 promise 調用方式
fn()
.then(function (res) {
console.log(res);
})
.catch(function (res) {
console.log(res);
});
●利用 async 和 await 關鍵字來使用
async function newFn() {
/**
* await 是等待的意思
*
* 在當前 fn 函數內, await 必須要等到后面的 Promise 結束以后, 才會繼續執行后續代碼
*/
const r1 = await fn();
console.log("第一次: ", r1);
const r2 = await fn();
console.log("第二次: ", r1);
const r3 = await fn();
console.log("第三次: ", r1);
}
newFn();
●async 和 await 語法的缺點
○await 只能捕獲到 Promise 成功的狀態
○如果失敗, 會報錯并且終止程序的繼續執行
async function newFu() {
const r1 = await fn();
console.log("失敗后, 提示用戶網絡錯誤"); // 如果失敗的話這行代碼并不會執行
}
newFu();
● 解決方法1: 使用 try...catch...
○語法: try { 執行代碼 } catch (err) { 執行的代碼 }
○首先執行 try 內部的代碼, 如果不報錯, catch 的代碼不執行了
○如果報錯, 不會爆出錯誤, 不會終止程序, 而是執行 catch 的代碼, 報錯信息在 catch 函數的形參內
async function newFu() {
try {
const r1 = await fn();
console.log(r1);
} catch (error) {
console.log("網絡錯誤, 請檢查網絡并重新請求");
}
}
newFu();
●解決方法2: 改變封裝的思路
○原因: 因為 promise 對象有成功和失敗的狀態, 所以會在失敗狀態是報錯
○解決: 封裝一個 百分比成功的 promise 對象, 讓成功和失敗的時候都按照 resolve 的形式來執行
○只不過傳遞出去的參數, 記錄一個表示成功或者失敗的信息
function fn() {
const p = new Promise(function (resolve, reject) {
const timer = Math.ceil(Math.random() * 3000) + 2000;
setTimeout(() => {
if (timer > 3500) {
resolve({ code: 0, msg: "班長買水失敗" });
} else {
resolve({ code: 1, msg: "班長買水成功" });
}
}, timer);
});
return p;
}
async function newFn() {
const r1 = await fn();
if (r1.code === 0) {
console.log("第一次請求失敗, 請檢查您的網絡信息");
} else {
console.log("第一次請求成功", r1.msg);
}
const r2 = await fn();
if (r2.code == 0) {
console.log("第二次請求失敗, 請檢查您的網絡信息");
} else {
console.log("第二次請求成功", r2.msg);
}
}
newFn();
開班時間: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號