2023-03-27
班長 函數 ○
●回調函數
○把函數 A 以實參的形式傳遞到 函數 B 內
○在函數 B 內以形參的方式調用到 函數 A
○此時我們可以把函數 A 叫做函數 B 的 回調函數
○我們在封裝異步代碼的時候會用到回調函數
function fnA () {console.log('我是 fnA 函數內部的代碼')}
function fnB(callback) {callback()}
fnB(fnA)
●使用回調函數封裝一個異步代碼
function fn(jinnang = () => {}) {
console.log("班長去買水了");
const timer = Math.ceil(Math.random() * 3000);
setTimeout(() => {
console.log("班長買完水了");
console.log("耗時", timer);
console.log("按照錦囊內的內容行事");
jinnang();
}, timer);
}
/**
* fn 函數一旦調用, 班長出發開始去買水
* 在班長出發的時候, 給他一個錦囊
*/
fn(() => {
console.log("去買一瓶牛奶");
});
fn();
●上述代碼已經完成了一個異步的封裝
●不過在工作中我們更多的是封裝網絡請求這種異步代碼
●但是我們這里通過一個 '買水耗時' 來模擬一個網絡請求的延遲, 我們約定如果時間超過 3500 毫秒, 那么就算是失敗, 否則就是成功
function fn(jinnang = () => {}) {
console.log("班長去買水了");
const timer = Math.ceil(Math.random() * 3000) + 2000;
setTimeout(() => {
if (timer > 3500) {
console.log("請求失敗", timer);
} else {
console.log("請求成功", timer);
}
}, timer);
}
/**
* fn 函數一旦調用, 班長出發開始去買水
* 在班長出發的時候, 給他一個錦囊
*/
fn(() => {
console.log("去買一瓶牛奶");
});
fn();
●此時我們已經封裝完畢了, 只不過這種封裝方式會帶來另一個問題, 就是回調地獄
●回調地獄: 當你使用回調函數過多的時候, 會出現的一種代碼書寫結構
●需求:
○再買水成功后, 讓班長幫忙退掉
○在推掉以后, 再次讓班長幫忙買水 (此時必須要在前一瓶水購買完成之后再去購買)
○在第二次買水成功以后, 再次讓班長去買水
fn(
() => {
console.log("班長第一次買水成功, 幫我退掉");
fn(
() => {
console.log("班長第二次買水成功");
fn(
() => {
console.log("班長第三次買水成功");
},
() => {
console.log("班長第三次買水失敗");
}
);
},
() => {
console.log("班長第二次買水失敗");
}
);
},
() => {
console.log("班長第一次買水失敗");
}
);
●這段代碼運行沒有任何問題, 但是閱讀起來極其不利于理解
○原因:
■按照回調函數的語法進行封裝, 只能通過傳遞一個函數作為參數來調用
■當你使用回調函數過多的時候, 會出現回調地獄的代碼結構
○解決:
■不按照回調函數的語法封裝
■ES6 推出了一種新的封裝異步代碼的方式, 叫做 Promise (承諾, 期約)
開班時間: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號