中文在线免费看视频_国产成人精品亚洲日本在线观看_亚洲精品第一综合99久久_国产亚洲精品日韩综合网

　　●回調函數

　　○把函數 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 (承諾, 期約)