ES7 中的 Async 函数和 Promises-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步操作是非常常见的，例如通过 AJAX 请求获取数据、使用定时器更新界面等。在 JavaScript 中，我们通常使用回调函数来处理异步操作，但是这种方式会导致代码难以阅读和维护。ES6 引入了 Promises 来解决这个问题，而 ES7 则进一步提供了 Async 函数来简化异步编程。

Promises

Promises 是一种用于处理异步操作的对象，它可以让我们以一种更加优雅的方式处理异步操作的结果。Promises 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当异步操作完成后，Promise 对象会从 pending 状态转变为 fulfilled 或 rejected 状态，表示操作完成并返回结果或出错。

以下是一个简单的 Promise 示例：

// javascriptcn.com 代码示例
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      resolve(data);
    }, 2000);
  });
}

fetchData().then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

在上面的代码中，我们定义了一个 fetchData 函数，它返回一个 Promise 对象。在 Promise 的构造函数中，我们使用 setTimeout 模拟了一个异步操作，并在两秒后调用了 resolve 函数来返回数据。在调用 fetchData 函数后，我们可以通过 then 方法来处理异步操作成功后的数据，并通过 catch 方法来处理异步操作失败后的错误。

Async 函数

Async 函数是一个异步操作的语法糖，它可以让我们以同步的方式编写异步代码。Async 函数的定义方式非常简单，只需要在函数声明前加上 async 关键字即可。在 Async 函数中，我们可以使用 await 关键字来等待异步操作完成并返回结果。

以下是一个使用 Async 函数的示例：

// javascriptcn.com 代码示例
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      resolve(data);
    }, 2000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

在上面的代码中，我们定义了一个 Async 函数 getData，它使用 await 关键字等待 fetchData 函数返回数据。在 Async 函数中，我们使用 try-catch 语句来处理异步操作的错误。在调用 getData 函数后，它会以同步的方式执行异步操作，并输出数据。

总结

使用 Promises 和 Async 函数可以让我们以一种更加优雅的方式处理异步操作，使代码更加易读和易维护。在实际开发中，我们应该尽可能地使用 Promises 和 Async 函数来处理异步操作。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65731d7ed2f5e1655dc3ef72