记住 Promise 中的 then() 回调函数的异步执行-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步操作是非常常见的。我们通常使用 Promise 来处理异步操作并获得它们的结果。在这种情况下，你需要记住一个非常重要的规则：Promise 中的 then() 回调函数总是异步执行。

这往往似乎很明显，但是我们经常会因此而犯一些错误。让我通过一个具体的例子来解释一下。

示例

让我们假设你有一个函数 getUser，它从远程服务器获取用户信息并返回一个 Promise：

function getUser(userId) {
  return fetch(`https://myapi.com/users/${userId}`).then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  });
}

现在让我们假设你想获取用户的名称并显示在页面上。你将代码编写成如下所示：

let userName;

getUser(123)
  .then(user => {
    userName = user.name;
  });

document.getElementById('user-name').textContent = userName;

但是，当你运行这段代码时，你发现页面上的用户名没有被更新。这是为什么呢？

这是因为 Promise 中的 then() 回调函数总是异步执行。当你给 Promise 添加一个 then() 回调函数时，它的执行将会延迟到 Promise 完成后的下一个事件循环中。因此，当你尝试更新页面中的元素时，变量 userName 还没有被赋值，因为 Promise 还没有完成。

现在你知道这个问题是什么，那么解决它也很简单。你只需要在 then() 回调函数中更新页面元素，就像这样：

getUser(123)
  .then(user => {
    const userName = user.name;
    document.getElementById('user-name').textContent = userName;
  });

这样你就可以正确的更新页面元素。记住，在 Promise 中使用 then() 回调函数时，总是将更新 UI 的代码包含在回调函数的内部，以避免发生类似的问题。

意义

了解 Promise 中 then() 回调函数的异步执行规则，对我们编写高效、可维护的代码非常重要。因为如果我们不了解异步执行，就可能会在代码中留下不必要的 bug，影响代码性能和可读性。

因此，学习这个规则不仅是理论上的，更是实践中的。当我们深入学习和理解它时，我们可以更好地编写代码和调试它。

结论

在前端开发中，Promise 是处理异步操作的常用工具。然而，在使用 Promise 的时候，我们需要记住 then() 回调函数的异步执行规则。正确地使用这个规则可以让我们避免在代码中留下 bug，并使代码更加高效和可读。

现在，你应该能够更好地理解这个规则了，并在你自己的项目中应用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67163cb5ad1e889fe21b7d40