Async/Await 在前端中的应用

2023 年 03 月 06 日

23 次浏览

3490字数

async/await 是 ECMAScript 2017 中新增的语法糖，旨在简化异步编程。它基于 Promise ，并通过引入 async 和 await 关键字来使异步代码看起来更像同步代码。

使用 async/await

使用 async/await 的前提条件是要有异步操作，比如发起 AJAX 请求或操作 DOM 。下面是一个简单的例子，展示如何使用 async/await 发起 AJAX 请求：

async function getData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

const data = getData('https://example.com/data');
data.then((result) => console.log(result));

在上面的例子中，我们定义了一个名为 getData 的异步函数，并将其声明为 async 。该函数接受一个 URL 参数，使用 fetch 函数向服务器发送请求，然后等待响应。一旦响应返回，代码就会继续执行，解析 JSON 数据并将其返回。

注意，在 try 代码块中使用了 await 关键字，这告诉 JavaScript 引擎等待该行代码的结果，然后继续执行接下来的代码。如果出现错误， catch 代码块会捕获并处理它们。

在上述代码中，我们调用了 getData 函数，并使用 .then() 方法处理返回值。由于 getData 函数返回一个 Promise ，因此可以使用 .then() 处理它的结果。

错误处理

与 Promise 一样，Async/Await 也需要正确地处理错误。如果一个异步操作失败，它将返回一个拒绝（ rejected ）状态的 Promise 。为了处理异步操作的错误，我们通常会在 try/catch 块中使用 await 。

下面是一个错误处理的例子：

async function getData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

在上述代码中，我们使用 if 语句检查是否从服务器收到了正常响应。如果没有，我们抛出一个错误。这会触发 catch 代码块，允许我们处理错误。

并行处理异步任务

在很多情况下，我们需要同时处理多个异步任务。这时，可以使用 Promise.all() 方法来并行执行异步任务，并等待它们全部完成后再继续执行代码。

下面是一个例子，展示如何同时发起多个 AJAX 请求并等待它们全部完成：

async function fetchData() {
  const urls = ['https://example.com/data1', 'https://example.com/data2', 'https://example.com/data3'];
  const promises = urls.map(url => fetch(url));
  const responses = await Promise.all(promises);
  const data = await Promise.all(responses.map(response => response.json()));
  return data;
}

const data = fetchData();
data.then((result) => console.log(result));

在上述代码中，我们首先定义了一个包含多个 URL 的数组。然后，我们使用 map() 方法将每个 URL 转换为一个 fetch() 方法调用，并将这些调用存储在一个新的数组中。

接着，我们使用 Promise.all() 方法等待所有 fetch() 调用都返回结果。然后，我们使用 map() 方法将每个响应解析为 JSON 数据，并将这些数据存储在一个新的数组中。

最后，我们将包含所有数据的数组返回到调用方。

使用 async/await 处理动画效果

在 Web 开发中，通常需要在 DOM 元素上应用动画效果。使用传统的 JavaScript 回调函数和 setTimeout() 方法来实现这些效果可能会导致出现回调地狱的问题。

通过使用 async/await，我们可以更轻松地在 DOM 上应用动画效果。例如，下面是一个简单的例子，展示如何使用 async/await 实现淡入动画效果：

async function fadeIn(element, duration) {
  element.style.opacity = 0;
  element.style.display = 'block';
  const start = performance.now();
  while (performance.now() - start < duration) {
    const percentage = (performance.now() - start) / duration;
    element.style.opacity = Math.min(percentage, 1);
    await new Promise(resolve => requestAnimationFrame(resolve));
  }
  element.style.opacity = 1;
}

在上述代码中，我们定义了一个名为 fadeIn 的异步函数，并将其声明为 async。该函数接受两个参数：一个 DOM 元素和一个表示动画持续时间的数字（以毫秒为单位）。

在函数的主体中，我们首先设置元素的初始状态：将其不透明度设置为 0，并将其显示出来（通过将其 display 样式设置为 "block" ）。

接着，我们使用 performance.now() 函数获取当前时间，并在每个帧之间进行循环。在循环内部，我们计算从动画开始到当前帧的时间百分比，并使用该百分比来计算元素应该具有的不透明度值。然后，我们使用 requestAnimationFrame() 函数等待下一帧，并将其封装在一个 Promise 中，以便在下一帧完成时恢复函数的执行。

最后，我们将元素的不透明度设置为 1 ，以确保最终状态正确。