前端 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}`);
  }); // 错误信息:失败啦


目录
相关文章
|
前端开发 JavaScript
JavaScript中的Async/Await:简化异步编程
JavaScript中的Async/Await:简化异步编程
545 109
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
814 204
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await
JavaScript异步编程:从回调地狱到Async/Await
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await优雅进化
JavaScript异步编程:从回调地狱到Async/Await优雅进化
|
前端开发 JavaScript
JavaScript异步编程:从Callback到Async/Await的进化
JavaScript异步编程:从Callback到Async/Await的进化
|
JavaScript 前端开发 API
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
882 8
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1769 14