JavaScript 程序中如何使用 await 实现异步调用

在JavaScript程序中，要使用awAIt实现异步调用，首先需要一个async函数作为await命令的执行环境。await关键字可以暂停async函数的执行，等待Promise对象的结果后再继续执行函数后面的代码。为了确保代码的健壮性，经常将await语句放在try...catch结构中以处理可能的异常。正确使用await可以使异步代码的阅读和维护变得更类似于同步代码、减少回调函数带来的"回调地狱"、提升代码的可读性和可维护性。

一、ASYNC函数基础

async函数是写异步代码的新方式。在此函数中，你可以用同步的方式写代码，但其背后依然是非阻塞的。任何返回Promise对象的操作都可以使用await来等待其解决(resolve)或拒绝(reject)。来看一个简单的例子：

async function fetchWithAwait() {

  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);
  }
}
fetchWithAwait();

在上述代码中，fetchWithAwait是一个async函数，在函数内部，首先发起网络请求获取数据。使用await等待fetch请求的Promise解决，然后使用第二个await等待解析JSON的Promise解决。如果在过程中出现异常，catch会捕获它。

二、AWAIT的使用规则

要精准地使用await，需要遵守一些规则。首先，await只能在async函数之中使用。其次，await会等待Promise对象的处理结果，如果不是Promise对象，会被转换成立即解决的Promise。

async function example() {

  const result = await 'Hello World';
  return result;
}
example().then(console.log);  // 输出 'Hello World'

确保await命令后面跟着的是一个Promise。这样，可以更加清晰地表达你的意图，代码的维护者也会更容易理解你的代码。

三、AWAIT与错误处理

正因为await可能会暂停函数的执行，等待Promise的解决，所以它也可能遇到Promise的拒绝(reject)。因此，错误处理变得非常重要，你应该对每个await表达式使用try...catch。

async function getUserData(userId) {

  try {
    const response = await fetch(`/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetching user data failed', error);
    throw error;  // Re-throw the error after logging it
  }
}

在这个函数中，如果网络请求失败或者JSON解析有误，catch块会捕获异常，并记录错误信息。在某些情况下，重新抛出错误是很有用的，这样调用者就可以再次捕获并进行相应处理。

四、AWAIT与并发控制

在处理多个异步任务时，await需要谨慎使用，以避免无意中降低程序的并发性能。比如下面的代码：

async function fetchMultipleUrls(urls) {

  let results = [];
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    results.push(data);
  }
  return results;
}

虽然这段代码逐个等待每个URL的响应，但由于await的阻塞性质，在一个请求完成前，其他请求无法同时进行，这会导致性能问题。为了提高效率，可以使用Promise.all():

async function fetchMultipleUrls(urls) {

  const promises = urls.map(url => fetch(url).then(response => response.json()));
  return Promise.all(promises);
}

通过Promise.all()，所有请求都可以并行进行，极大地提高了效率。

五、AWAIT与循环

有时候，我们需要在循环中使用await，例如迭代处理一个Promise数组。这时候，你需要确保循环不会因为await而失去效率。通常来说，最好使用for...of循环或Array.prototype.forEach方法：

async function processPromises(promises) {

  for (const promise of promises) {
    const result = await promise;
    console.log(result);
  }
}

虽然上面的代码看起来很直观，但需要注意的是，这将会顺序处理每个Promise，从而可能损失并发性能。在某些情况下，你可能需要并行处理，而在另一些情况下，你确实需要按顺序等待每个Promise的结果。

六、优化AWAIT的使用

正确优化await的使用对于写出高性能的异步代码至关重要。例如，如果你有多个异步操作，而这些操作之间互不依赖，那么最好不要串行等待它们。你应该尽可能地启动所有异步操作，然后一起等待它们的结果：

async function optimizedMultipleCalls() {

  const promise1 = doAsyncOperation1();
  const promise2 = doAsyncOperation2();
  const results = await Promise.all([promise1, promise2]);
  return results; 
}

这种方法可以显著减少等待时间，因为doAsyncOperation1()和doAsyncOperation2()会同时执行，而不是等待其中一个完成后再执行另一个。

总结，await关键字在JavaScript中为异步编程带来了更加简洁和易于维护的语法。它允许开发者用近似同步的思维方式去处理异步任务，并能够以优雅简洁的方式捕获和处理错误。然而，正确使用await需要对其行为有正确的理解，包括何时应该将异步操作并行化以提高效率，何时应该保持操作的顺序性。掌握await的使用，将是每个JavaScript开发者在构建高效、可维护应用程序时的重要步骤。

相关问答FAQs：

Q1: 在 JavaScript 程序中，如何正确使用 await 关键字进行异步调用？

A1: 使用 await 关键字是实现 JavaScript 异步调用的有效方式。您可以将 await 关键字放在一个异步函数中，以等待另一个返回 Promise 对象的异步任务完成。例如，您可以使用 await 关键字等待一个异步网络请求的结果返回。

Q2: 我可以在 JavaScript 中的任何地方使用 await 关键字吗？

A2: 不幸的是，await 关键字只能在异步函数中使用。这意味着您必须在函数前面加上 async 关键字，才能在函数体内使用 await 关键字。这是为了确保 JavaScript 引擎能够正确处理异步操作并返回结果。

Q3: 当我使用 await 关键字时，会发生什么？

A3: 当您使用 await 关键字时，JavaScript 引擎将会暂停函数的执行，直到等待的异步任务完成并返回结果。这样可以确保在继续执行函数之前，您能够获取到异步任务的结果。同时，使用 await 关键字还可以避免使用回调函数或者使用 Promise 的链式调用方式，使异步代码更易于理解和维护。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。