插件窝 干货文章 了解 JavaScript 中的异步代码:它是什么以及为什么它很重要

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

异步 代码 strong 处理 110    来源:    2024-10-20

如果您使用 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) => response.json())
  .then((data) => console.log(data))
  .catch((error) => 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。

  • 了解如何处理异步代码中的错误对于编写健壮的应用程序至关重要。