回調-js教程-PHP中文網

回調

Patricia Arquette

發布： 2024-10-19 22:34:02

原創

249 人瀏覽過

在 JavaScript 中，我們有不同的方法來處理非同步呼叫。
它允許您處理非同步任務，例如從伺服器取得資料、讀取檔案或等待事件。

回調

這是一個呼叫另一個函數的函數。
讓我們來看一個例子，以便我們更好地理解它：

getUser() 函數：

id：這是您要擷取從 getUser(1, ...) 呼叫傳遞的使用者的 id。
回呼：這是在檢索「使用者資料」後將呼叫的函數（此處由 setTimeout() 函數模擬）。
在setTimeout() 函數內部，callback() 函數在延遲後被調用，傳遞一個模擬用戶物件作為其參數： { id: id, name: 'Diana', email: 'Diana@test. com' }.

執行流程：

getUser(1, user => { console.log('用戶', user); });被稱為。
在 getUser() 內部，使用 setTimeout() 觸發 3 秒的延遲。
3 秒後：訊息「正在從資料庫取得使用者...」被記錄到控制台。使用使用者物件呼叫回調函數 { id: 1, name: 'Diana', email: 'Diana@test.com' }.
回呼函數將 User 和使用者物件記錄到控制台。

最終輸出：

回調地獄模式 - 當多個非同步操作相互依賴時會發生這種情況，從而導致深度嵌套的回調。隨著嵌套的增加，程式碼變得更難以閱讀、維護和調試。讓我們來看一個例子：

讓我們來分解一下：

取得使用者： 在這裡，我們啟動第一個非同步呼叫 getUser(1)，它模擬從資料庫取得使用者資料。取得資料後，將執行回呼函數，將使用者詳細資料記錄到控制台。

getUser(1, user => {
    console.log('User', user);
    // ...
});

登入後複製

取得使用者訂單：
在 getUser() 的回呼中，我們對 getOrders(user.id) 進行另一個非同步調用，模擬從資料庫中取得使用者的訂單。這需要在第一個回調中嵌套另一個回調。獲取訂單後，訂單將被記錄。

getUser(1, user => {
    console.log('User', user);
    // ...
});

登入後複製

取得訂單詳細資訊： 獲取訂單後，我們需要獲取一個特定訂單（orders[1]）的詳細資訊。這導致了第三層嵌套，其中調用 getOrdersDetails() 來獲取訂單詳細信息，然後將它們記錄到控制台。

getOrders(user.id, orders => {
    console.log(`${user.name}'s orders`, orders);
    // ...
});

登入後複製

程式碼結構（巢狀）：

請注意每個非同步操作如何依賴前一個操作，從而產生深度嵌套的結構。讓程式碼變得困難：

3.偵錯：當涉及多個層級的回呼時，辨識錯誤發生的位置變得更加複雜。

它還使程式碼「緊密耦合」 - 每個函數都依賴前一個函數的輸出，這意味著程式碼是緊密耦合的，降低了可重用性。

結果：

避免回調地獄：
使用 Promises 和 async/await 等現代 JavaScript 功能可以避免回調地獄。這些方法允許以更易讀、順序的方式編寫非同步程式碼。

以上是回調的詳細內容。更多資訊請關注PHP中文網其他相關文章！