前端 js 经典:async 和 await

简介: 前端 js 经典:async 和 await

1. 什么是 async

async 作为一个关键字放到函数前面,用于表示函数是一个异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

async 函数返回的是一个 Promise 对象

2. 怎么用

// 调用fn返回的是promise对象,如果我们要拿到返回值,用then,如果返回错误,用catch
async function fn(flag) {
  if (flag) {
    return "success";
  } else {
    throw "faild";
  }
}
fn(true)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

3. 什么是 await

await 后面可以放任何表达式,不过正常情况下还是放一个返回 promise 对象的表达式。

await 关键字只能放在 async 函数里

// 延时函数delay
const delay = (time) =>
  new Promise((resolve) => {
    setTimeout(resolve, time);
  });
 
// f() 异步函数就完美的解决了回调函数问题
async function f() {
  await delay(1000);
  await delay(2000);
  await delay(3000);
  return "done";
}
 
// 6秒后打印结果 done
f().then((data) => {
  console.log(data);
});

4. try...catch

await 后的 promise 对象报错怎么办,页面不可能一直卡在那不动,这对于用户体验是很不友好的。那么 try...catch 应运而生

let faildPro = new Promise((resolve, reject) => {
  reject("失败啦");
});
 
async function resultFn() {
  try {
    let result = await faildPro;
    return result;
  } catch (err) {
    throw err;
  }
}
 
resultFn()
  .then((res) => {
    console.log(`返回体:${res}`);
  })
  .catch((err) => {
    console.log(`错误信息:${err}`);
  }); // 错误信息:失败啦


目录
相关文章
|
2月前
|
前端开发 JavaScript
JavaScript中的Async/Await:简化异步编程
JavaScript中的Async/Await:简化异步编程
289 109
|
2月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
381 204
|
3月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await
JavaScript异步编程:从回调地狱到Async/Await
|
3月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await优雅进化
JavaScript异步编程:从回调地狱到Async/Await优雅进化
|
3月前
|
前端开发 JavaScript
JavaScript异步编程:从Callback到Async/Await的进化
JavaScript异步编程:从Callback到Async/Await的进化
|
6月前
|
JavaScript 前端开发 API
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
887 14
|
12月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
236 0
|
12月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
354 6

热门文章

最新文章

  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    68
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    330
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    367
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    558
  • 5
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    345
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    351
  • 7
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    204
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 9
    详解智能编码在前端研发的创新应用
    440
  • 10
    智能编码在前端研发的创新应用
    316