家具 东莞网站建设,阿里虚拟主机无法安装wordpress,专业做效果图网站,做搜狗手机网站优化目录 async 关键字await 关键字使用 async 和 await 解决回调地狱问题错误处理总结 在JavaScript中#xff0c;
async和
await是用于简化基于
Promise的异步编程的关键字。在ES2017#xff08;也称为ES8#xff09;中引入后#xff0c;它们迅速成为管理异步代码的首选方… 目录 async 关键字await 关键字使用 async 和 await 解决回调地狱问题错误处理总结 在JavaScript中
async和
await是用于简化基于
Promise的异步编程的关键字。在ES2017也称为ES8中引入后它们迅速成为管理异步代码的首选方法之一因为它们可以帮助改善代码的可读性和维护性。 async 关键字
async 关键字用于声明一个异步函数它是一个返回Promise对象的函数。当函数执行时如果遇到没有显式返回Promise的代码async函数会自动将其包装在Promise中。 async函数是使用async关键字声明的函数。async 函数是AsyncFunction 构造函数的实例并且其中允许使用await 关键字。asyne 和await 关键字让我们可以用一种更简洁的方式写出基于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 pnamedocument.querySelector(.city).innerHTML cnamedocument.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);}
}try 和 catch 的作用语句标记要尝试的语句块并指定一个出现异常时抛出的响应
try {// 要执行的代码
} catch (error) {// error 接收的是错误消息// try 里代码如果有错误直接进入这里执行
}try 里有报错的代码会立刻跳转到 catch 中 总结
使用async/await可以编写出更清晰、更类似于同步代码的异步JavaScript程序。它消除了Promise.then()链式调用的需要从而简化了对异步操作的控制流管理。但要记住为了保持效率只有在你需要等待异步操作结果的情况下才应该使用await否则你可能会不必要地延迟执行。
