导航JavaScript：异步 /等待-js教程-PHP中文网

导航JavaScript：异步 /等待

DDD

发布： 2025-01-26 04:28:11

原创

837 人浏览过

Navigating JavaScript: Async / Await

JavaScript异步编程对于新手来说可能是个挑战，但掌握它对于精通这门语言至关重要。

作为一名相对较新的开发者，JavaScript的语法细微之处有时令人兴奋，有时则让人不知所措。JavaScript中一个让我费了一段时间才真正理解的方面是处理异步代码。JavaScript并没有单一的方法来处理异步代码，虽然这可能会让新手感到困惑，但理解编写异步代码的常用方法，证明了它对我在开发方面的进步至关重要。

两种最常见的方法是使用async/await或then/catch。每种方法都有其自身的价值，不过自从async/await在ES2017出现以来，它通常被认为是更高效的继承者。让我们首先看看所谓的先行者then/catch。

Then/Catch

then/catch方法历史上是处理Promise的标准方法。下面是一个示例：

<code class="language-javascript">fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });</code>

登录后复制

从外部API获取数据后，.then()用于处理已完成的Promise，而.catch()则处理异步操作期间发生的任何错误。虽然这种方法有效，但在需要链接多个异步调用时可能会变得很麻烦，因为每个.then()都会增加一个缩进级别和复杂性。这使得程序即使对于非初学者来说也很混乱！

Async/Await

async/await简化了异步代码的编写方式。使用async/await，异步操作可以以一种几乎看起来像是同步的方式编写，使代码更易于阅读和理解。这是一个示例：

<code class="language-javascript">async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}</code>

登录后复制

async关键字（始终放在函数开始之前）用于定义一个返回Promise的函数。await关键字会暂停函数的执行，直到Promise完成，就像要求它之后的所有内容都暂停一样。这样，代码的流程看起来就是顺序的。

这种方法允许你避免深度嵌套和混乱的回调，并提高代码的可读性。但是，async/await并不能完全消除错误——你仍然需要适当的错误处理，这引出了我们的下一个主题。

Try/Catch

在async/await中，try/catch块提供了一种更清晰的错误处理方式。无需链接.catch()调用，你可以将你的意图封装在一个try块中，并在单个catch块中处理错误。这种方法使错误处理逻辑与相关的代码保持紧密联系，从而更容易调试和维护。

这是一个try/catch与async/await一起使用的示例：

<code class="language-javascript">fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });</code>

登录后复制

这种结构确保所有错误处理都得到整合，并且代码保持可读性。它通常被认为更直观，尤其对于从同步编程范式过渡的开发者来说。

附加：安全赋值运算符

安全赋值运算符（??=）是一个较新的工具，可以增强JavaScript代码的清晰度，尤其是在处理默认值时。此运算符仅当变量为null或undefined时才为变量赋值。这是一个示例：

<code class="language-javascript">async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}</code>

登录后复制

在异步操作的上下文中，此运算符在处理可能未定义或为null的响应时，可以帮助设置回退值。