了解 JavaScript 中的异步代码：它是什么以及为什么它很重要

php中文网 2024-10-15 12:02:23

如果您使用 javascript 一段时间，您可能已经遇到过异步代码的概念。无论您是发出 api 请求、等待用户输入还是加载大型数据集，异步操作对于保持应用程序顺利运行都至关重要。

但是异步代码到底是什么？它与同步代码有何不同？在这篇文章中，我们将对其进行分解并探讨为什么异步编程是 javascript 中的游戏规则改变者。

什么是异步代码？

简单来说，异步代码允许任务在后台运行，而不会阻塞主执行流程。这意味着程序可以继续执行其他代码，而不是等待操作（例如网络请求）完成。

这种行为在 javascript 中尤其重要，因为它是单线程，这意味着主线程上一次只能运行一个任务。如果没有异步代码，长时间运行的操作将阻塞整个程序，导致应用程序无响应。

立即学习“Java免费学习笔记（深入）”；

同步与异步代码：快速比较

让我们首先比较同步和异步代码在实践中的行为方式。

同步代码示例


function fetchdata() {
  const data = getdatafromserver(); // assume this takes 3 seconds
  console.log(data);
}

console.log('start');
fetchdata(); // blocks the code until data is fetched
console.log('end'); // this will only run after 3 seconds, when fetchdata completes

在这个同步示例中，一切都是一步一步发生的。当调用 fetchdata() 时，它会阻塞其余代码（包括 console.log('end')），直到获取数据为止，从而导致 3 秒的延迟。

异步代码示例

现在，让我们看一下用异步代码编写的同一示例。


async function fetchdata() {
  const data = await getdatafromserver(); // assume this takes 3 seconds
  console.log(data);
}

console.log('start');
fetchdata(); // this starts fetching data in the background
console.log('end'); // this runs immediately, without waiting for fetchdata to complete

这里，代码不会阻塞。 fetchdata() 开始运行，但代码没有等待获取数据，而是继续到 console.log('end')。每当获取操作完成时，数据就会被记录。

这就是异步代码的力量 - 即使在等待缓慢的操作完成时，它也能让应用程序保持运行和响应。

为什么使用异步代码？

异步代码在 javascript 中至关重要的原因有几个：

1。非阻塞操作

在处理网络请求、读取文件或与数据库交互等任务时，您不希望程序冻结。异步代码可确保长时间运行的操作不会阻塞应用程序的其余部分，从而使其保持响应能力。

2。提高性能

异步编程允许多个任务同时运行。例如，您可以同时从多个 api 获取数据，而无需等待每个请求按顺序完成。这种并发性提高了应用程序的整体性能。

3。处理缓慢的操作

任何需要未知时间的操作（例如从服务器获取数据）都是异步代码的良好候选者。通过不阻塞主线程，您的应用程序可以更有效地处理缓慢的操作。

javascript 中的异步模式

javascript 提供了多种处理异步操作的方法。我们来看看其中的一个。

异步/等待

async 和await 允许您编写外观和行为类似于同步代码的异步代码，从而提高可读性并使错误处理更加简单。


async function fetchdata() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

通过使用异步函数和等待 promise，您可以暂停函数的执行，直到 promise 解析，从而使异步代码更易于推理。

异步代码中的错误处理

处理异步代码中的错误可能很棘手。在同步代码中，通常使用 try...catch 捕获错误。然而，对于异步任务，错误可能不会立即发生，因此您需要不同的策略来处理它们。

承诺：

使用 .catch() 处理错误：


fetch('https://api.example.com')
  .then((response) =&gt; response.json())
  .then((data) =&gt; console.log(data))
  .catch((error) =&gt; console.error(error)); // error is handled here

使用异步/等待：

在异步函数中，您可以使用 try...catch 来处理错误，类似于在同步代码中的处理方式：


async function fetchData() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error); // Error is handled here
  }
}

这使得异步代码中的错误处理更加直观。

结论

异步代码是 javascript 中的一个基本概念，尤其是在处理可能需要未知时间的任务时，例如网络请求或文件操作。通过了解异步代码的工作原理并使用 promises 和 async/await 等模式，您可以编写更高效、响应更快且可维护的应用程序。

要点：

异步代码是非阻塞的，允许程序的其他部分在等待任务完成时继续运行。
javascript 提供了多种处理异步操作的方法，包括 async/await。
了解如何处理异步代码中的错误对于编写健壮的应用程序至关重要。

以上就是了解 JavaScript 中的异步代码：它是什么以及为什么它很重要的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/11977.html