回调

在 JavaScript 中，我们有不同的方法来处理异步调用。
它允许您处理异步任务，例如从服务器获取数据、读取文件或等待事件。

回调

这是一个调用另一个函数的函数。
让我们看一个例子，以便我们更好地理解它：

• 使用 ID 和回调函数调用 getUser()，该函数将打印用户 ID、姓名和电子邮件。回调将在异步 getUser 操作完成后执行。

getUser() 函数：

• id：这是您要检索从 getUser(1, ...) 调用传递的用户的 id。

• 回调：这是在检索“用户数据”后将调用的函数（此处由 setTimeout() 函数模拟）。

• 在 setTimeout() 函数内部，callback() 函数在延迟后被调用，传递一个模拟用户对象作为其参数： { id: id, name: 'Diana', email: 'Diana@test. com' }.

执行流程：

1. getUser(1, user => { console.log('用户', user); });被称为。
2. 在 getUser() 内部，使用 setTimeout() 触发 3 秒的延迟。
3. 3 秒后：消息“正在从数据库获取用户...”被记录到控制台。使用用户对象调用回调函数 { id: 1, name: 'Diana', email: 'Diana@test.com' }.
4. 回调函数将 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);
    // ...
});

代码结构（嵌套）：

请注意每个异步操作如何依赖于前一个操作，从而产生深度嵌套的结构。使代码变得困难：

1. 阅读：当回调嵌套很深时，很难理解逻辑流程。

2. 错误处理：多级回调处理错误是很困难的。

3.调试：当涉及多个级别的回调时，识别错误发生的位置变得更加复杂。

它还使代码“紧密耦合” - 每个函数都依赖于前一个函数的输出，这意味着代码是紧密耦合的，降低了可重用性。

结果：

避免回调地狱：
使用 Promises 和 async/await 等现代 JavaScript 功能可以避免回调地狱。这些方法允许以更易读、顺序的方式编写异步代码。

以上是回调的详细内容。更多信息请关注PHP中文网其他相关文章！