ES6学习笔记（4）async的简单实用

最新推荐文章于 2024-07-13 17:43:47 发布
最新推荐文章于 2024-07-13 17:43:47 发布
阅读量4.6k 收藏 2
点赞数
分类专栏： javascript ES6 文章标签： javscript async 异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AboyL/article/details/80561665
版权
本文介绍了ES6中async和await的关键字，探讨它们如何解决JavaScript中的异步问题。async函数基于Promise实现，允许开发者以更同步的方式编写异步代码，避免回调地狱。文章通过示例展示了如何使用回调函数、Promise和async/await处理异步请求，并指出async函数返回Promise，await用于等待Promise结果。最后总结了async/await的使用要点。
摘要由CSDN通过智能技术生成

async意思是异步

await的意思是等待

这两个关键字是在ES7中新加入的语法，如果要在浏览器中使用考虑到兼容性的问题，我们还是需要使用babel进行转换。七亩地是为了解决js中的异步问题。

现在异步解决方案有三种：

    回调函数

    promise

    async（Generator）

因为js的异步机制，我们所有的异步操作都会被放到一个队列中，等到所有的同步的操作执行完毕了，才会去执行异步队列中的程序，回调函数是最基础的处理方案，也就是在某个异步操作操作完成以后对返回的结果进行操作。但是使用回调函数也会有一个问题，就是会产生回调地狱，而且，我们的函数会不好看。有的时候我们就是需要等到异步操作执行完成才能进行后面的操作，这样代码写起了就很难看。

而使用promise虽然能解决回调地狱的问题，但是他看起来还是不像是同步的代码，需要大量的 .then 操作，其实写多了也很烦的。而async就是号称是最终解决方案了。

如果我们需要获取到一个异步请求的数据，我们使用这三种方法应该怎么做呢？

回调函数

```

    getDate(res=>{clg res})

```

promise

```

    getDate.then(res=>{ clg res},res=>{ clg res})

最低0.47元/天 解锁文章
AboyL
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6中Async的使用
qq_41097495的博客
04-29 344
1.async基本用法 async会返回一个promise对象 // 运行async函数，每次执行完一个await后的语句 就会先撤出去执行外部的代码。 async function asyncFunc(){ await console.log('第1行代码'); await console.log("第2行代码"); await console.log("第3行代码");...
【VUE 在父组件mounted执行完毕之后再执行子组件的mounted】
热门推荐
weixin_52137696的博客
08-19 1万+
VUE 在父组件mounted执行完毕之后再执行子组件的mounted
在 Vue 的 mounted 钩子函数中使用异步函数是否会有风险需要考虑
weixin_47353884的博客
09-14 851
使用 await,执行时不会blocking,但获取数据时组件已渲染。所以,如果获取标签配置数据非关键,可以使用异步函数,但需要注意加载状态。如果是关键数据,建议使用同步函数获取,甚至提前获取,以免影响组件的渲染。这个修改可以避免异步函数的一些风险,确保组件只在数据获取完成后才渲染。如果异步请求时间过长,组件会先渲染,导致页面空白或显示不正确。获取数据失败会直接抛出异常,可以明确错误来源。- 直接返回数据,组件渲染需等待执行结束。组件渲染会等待数据就绪,避免空状态问题。改为同步函数,直接返回结果。
搞定前端面试题——ES6同步与异步机制、async/await的使用以及Promise的使用！！！
最新发布
qq_65034569的博客
07-13 622
搞定ES6同步与异步机制、async/await的使用以及Promise的使用！！！
ES6 async 学习笔记(async-await只能保证async内部顺序，调用顺序无法保证)
黄彪博客
08-14 757
文章目录async基本语法async函数的返回值是 Promise 对象async函数内部return语句返回的值，会成为then方法回调函数的参数。await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。await命令只能出现在 async 函数内部，...
vue-async 修饰created，created及mounted内代码执行顺序
weixin_44705310的博客
03-11 7866
vue-async 修饰created，created及mounted内代码执行顺序
async 与 await (js)
weixin_43677787的博客
01-22 701
async 和 await 用于异步（promise）处理。 async 和await 不能用于生命周期（beforeCreate( 创建前 ，created ( 创建后 ），beforeMount（挂载组件之前）mounted（挂载完组件）beforeUpdate（更新之前），updated（更新后）beforeDestroy（销毁前），destroyed（销毁后））。 为什么？生命周期是同步，async和await是异步，它会让同步变成异步。 await 后面接收返回的new Promise 函数并执
es6学习笔记之Async函数的使用示例
12-10
前言 异步操作是 JavaScript 编程...async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。下面就来看看关于async函数的两个栗子： 栗子一：从豆瓣 API 获取数据 var fetchDoubanApi = function() {
es6学习笔记之Async函数基本教程
01-21
本文介绍的是关于es6中Async函数的相关内容，非常出来供大家参考学习，需要的朋友们下面来看看详细的介绍： async 函数 async 函数，使得异步操作变得更加方便。它是 Generator 函数的语法糖。 Generator 函数，...
ES6 学习笔记.pdf
07-05
本次学习笔记中涉及的知识点主要涵盖了ES6的关键特性，包括变量声明、字符串和正则表达式、函数、对象、异步处理、数组、模块化等。 1. 块级作用域 在ES6之前，JavaScript只有一种作用域，即函数作用域。这使得变量...
在Vue中如何使用async/await处理异步操作
iouytrep的博客
10-14 2336
具体到 我们的代码, 遇到await 之后，代码就暂停执行了， 等待doubleAfter2seconds(30) 执行完毕doubleAfter2seconds(30) 返回的promise 开始执行，2秒 之后，promise resolve 了， 并返回了值为60， 这时await 才拿到返回值60， 然后赋值给result， 暂停结束，代码才开始继续执行，执行 console.log语句。而在异步函数中，我们可以使用await来等待一个Promise对象，然后获得该对象的值。
vue 自动触发 async 事件
My_Java_yon的博客
08-13 377
vue 自动触发 async 事件
使用async/await并不会执行接下来的代码，原因及解决办法
changyana的博客
08-19 1710
get_table_header函数中创建了新的Promise，但是在处理get_table_header_setting(params)的响应时，并未调用resolve()或reject()，这使得返回的Promise永远处于pending状态，所以await this.get_table_header()也就永远不会返回，导致后续的代码无法执行。
async/await 深度理解使用
izhaong
05-25 387
在vue中使用 eg async created () { await setTimeout(()=>{ console.log(1) },5000); }, async mounted () { console.log(2) } 在vue中给created使用async await，还是会先输出2，而不是等1输出完？ 若想实现这个要...
vue中 async、await不生效问题排查
weixin_43837268的博客
10-26 1万+
1、async是否在await的最近的方法的外层 例： async mounted() { this.getSysTime(res => { itime = setInterval(async () => { // 注意这个async才能生效 await this.request(); }, 1000);
简介ES6、HTML5、CSS3新增特性。
好的文章我尽力写，大家的学习我尽力帮
03-04 1037
1.let、cosnt的出现 （1）.相同点：let/cosnt是块级的作用域。不存在变量提升。不可重复声明 (2).不同点：let的值和类型都可以改变，const不可以 2.变量的解构赋值 async mounted() { let { data: res } = await getMenuList(); // console.log(res); this.menuList = res.data; this.activePath = this.$..
vue中异步函数async和await的用法
很多时候犯错都是在不知情的情况下发生的
07-10 2117
先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数 async function timeout() { 　　return 'hello world'; } 　　语法很简单，就是在函数前面加上async关键字，来表示它是异步的，那怎么调用呢？async函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了，为了表示它没有阻塞它后面代...
JavaScript ES6 学习笔记：块级作用域、Promise、Class 等核心知识点
ES6 学习笔记 **块级绑定** 在 ES6 中，引入了块级绑定（Block Scope），解决了 var 声明变量的问题。块级绑定使得变量的作用域限定在当前块中，不会污染全局对象。 **变量声明** 在 ES6 中，引入了 let 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值