js中async与await详解

最新推荐文章于 2024-09-18 11:42:18 发布

林小鹿@

最新推荐文章于 2024-09-18 11:42:18 发布

阅读量3.3k

点赞数 2

分类专栏：其他文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45629285/article/details/130925510

版权

其他专栏收录该内容

6 篇文章 1 订阅

订阅专栏

引言

JavaScript 是一门基于事件驱动和异步编程的语言，而异步编程是 JavaScript 中最常用的编程方式之一。在异步编程中，我们通常使用回调函数或 Promise 对象来处理异步操作的结果。而在 ES2017 中，引入了 async 和 await 关键字，使得异步编程更加简洁和易读。

Promise 对象

在介绍 async 和 await 之前，我们先来了解一下 Promise 对象。Promise 对象是 JavaScript 中处理异步编程的一种机制，它可以将异步操作封装成一个对象，使得异步操作的结果可以像同步操作一样被处理。

一个 Promise 对象表示一个异步操作的最终完成或失败，并且可以将其结果返回给异步操作的调用者。Promise 对象有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已失败）。当一个 Promise 对象处于等待中状态时，它表示异步操作正在进行中；当一个 Promise 对象处于已完成状态时，它表示异步操作已经成功完成；当一个 Promise 对象处于已失败状态时，它表示异步操作已经失败。

在使用 Promise 对象时，我们通常使用 then 方法处理异步操作的结果，或者使用 catch 方法处理异步操作的错误。以下是一个简单的例子，演示如何使用 Promise 对象处理异步操作的结果：

javascript
Copy code
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的例子中，我们使用 fetch 函数从服务器获取数据，并将其解析为 JSON 格式。然后，我们使用 then 方法处理解析后的数据，或者使用 catch 方法处理错误。

async 函数

async 函数是一种特殊的函数，它的返回值是一个 Promise 对象。使用 async 关键字声明的函数可以在内部使用 await 关键字来等待异步操作完成，并返回一个 Promise 对象。在 async 函数中使用 await 关键字可以让异步操作的结果像同步操作一样被处理，从而避免了回调地狱的问题。

以下是一个简单的例子，演示如何定义和调用 async 函数：

javascript
Copy code
// 定义一个 async 函数
async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// 调用 async 函数
getData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的例子中，我们先定义了一个名为 getData 的 async 函数。在 getData 函数中，我们使用 await 关键字等待从服务器获取数据的异步操作完成，并将结果解析为 JSON 格式。最后，getData 函数返回解析后的数据。

在调用 getData 函数时，我们使用 then 方法处理返回的数据，或者使用 catch 方法处理错误。由于 getData 函数返回的是一个 Promise 对象，因此我们可以使用 Promise 的标准方法来处理返回的结果。

需要注意的是，await 关键字只能在 async 函数中使用，否则会导致语法错误。如果在非 async 函数中使用 await 关键字，会导致语法错误。

await 关键字

await 关键字用于等待一个异步操作完成，并返回异步操作的结果。在使用 await 的时候，需要将其放在一个 async 函数内部。在等待异步操作完成时，JavaScript 引擎会暂停执行当前函数，并等待异步操作完成，然后再继续执行下面的代码。

以下是一个简单的例子，演示如何使用 await：

javascript
Copy code
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// 调用 fetchData 函数
fetchData().then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

在上面的例子中，fetchData 函数使用 await 等待 fetch 函数返回的结果，然后再等待将结果解析为 JSON 格式。最后，fetchData 函数返回解析后的数据。在调用 fetchData 函数时，使用 then 方法处理返回的数据，或者使用 catch 方法处理错误。

需要注意的是，await 只能等待返回 Promise 对象的异步函数执行完成，如果等待的不是 Promise 对象，会自动将其转换为 Promise 对象。