async和await关键字

发布时间:2024年01月07日


在JavaScript中, asyncawait是用于简化基于 Promise的异步编程的关键字。在ES2017(也称为ES8)中引入后,它们迅速成为管理异步代码的首选方法之一,因为它们可以帮助改善代码的可读性和维护性。

async 关键字

async 关键字用于声明一个异步函数,它是一个返回Promise对象的函数。当函数执行时,如果遇到没有显式返回Promise的代码,async函数会自动将其包装在Promise中。
async函数是使用async关键字声明的函数。async 函数是AsyncFunction 构造函数的实例,并且其中允许使用await 关键字。asyneawait 关键字让我们可以用一种更简洁的方式写出基于Promise 的异步行为,而无需刻意地链式调用promise

下面是一个async函数的示例:

async function fetchData() {
  // 返回值会被包装在Promise中
  return 'data fetched';
}

调用这个函数实际上返回了一个解析为返回值的Promise

await 关键字

await关键字仅在async函数内部有效,用于等待一个Promise解决(resolve)并返回Promise成果(fulfilled)的值。它可以让异步代码看起来和同步代码类似,因为你可以按照编写同步代码的方式来顺序地写异步代码。

这里有一个await的例子:

async function fetchData() {
  let data = await someAsyncOperation(); // 等待Promise解决
  console.log(data); // 使用Promise解决的结果
  return 'done';
}

这段代码中,await someAsyncOperation()将会暂停fetchData的执行,直到someAsyncOperation()返回的Promise被解决。

使用 async 和 await 解决回调地狱问题


1.概念:在 async 函数内,使用 await 关键字取代 then 函数,等待获取Promise 对象成功状态的结果值

2.做法:使用 async 和 await 解决回调地狱问题

3.核心代码:

/**
 * 目标:掌握async和await语法,解决回调函数地狱
 * 概念:在async函数内,使用await关键字,获取Promise对象"成功状态"结果值
 * 注意:await必须用在async修饰的函数内(await会阻止"异步函数内"代码继续执行,原地等待结果)
*/
// 1. 定义async修饰函数
async function getData() {
  // 2. await等待Promise对象成功的结果
  const pObj = await axios({url: 'http://**/api/province'})
  const pname = pObj.data.list[0]
  const cObj = await axios({url: 'http://**/api/city', params: { pname }})
  const cname = cObj.data.list[0]
  const aObj = await axios({url: 'http://**/api/area', params: { pname, cname }})
  const areaName = aObj.data.list[0]


  document.querySelector('.province').innerHTML = pname
  document.querySelector('.city').innerHTML = cname
  document.querySelector('.area').innerHTML = areaName
}

getData()

使用 await 替代 then 的方法。

错误处理

async/await中,可以使用传统的try/catch语句来处理异常,这使得异步代码的错误处理变得更加直观:

async function fetchDataWithErrorHandling() {
  try {
    let data = await someAsyncOperation();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

trycatch 的作用:语句标记要尝试的语句块,并指定一个出现异常时抛出的响应

try {
  // 要执行的代码
} catch (error) {
  // error 接收的是,错误消息
  // try 里代码,如果有错误,直接进入这里执行
}

try 里有报错的代码,会立刻跳转到 catch 中

总结

使用async/await可以编写出更清晰、更类似于同步代码的异步JavaScript程序。它消除了Promise.then()链式调用的需要,从而简化了对异步操作的控制流管理。但要记住,为了保持效率,只有在你需要等待异步操作结果的情况下才应该使用await,否则,你可能会不必要地延迟执行。

文章来源:https://blog.csdn.net/m0_62943934/article/details/135439575
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。