浅谈Async/Await

时间:2022-08-29 17:39:15

概要

在很长一段时间里面,FE们不得不依靠回调来处理异步代码。使用回调的结果是,代码变得很纠结,不便于理解与维护,值得庆幸的是Promise带来了.then(),让代码变得井然有序,便于管理。于是我们大量使用,代替了原来的回调方式。但是不存在一种方法可以让当前的执行流程阻塞直到promise完成。JS里面,我们无法直接原地等promise完成,唯一可以用于提前计划promise完成后的执行逻辑的方式就是通过then附加回调函数。 现在随着Async/Await的增加,可以让接口按顺序异步获取数据,用更可读,可维护的方式处理回调。

What Is Async/Await

Async/Await是一个期待已久的JavaScript特性,让我们更好的理解使用异步函数。它建立在Promises上,并且与所有现有的基于Promise的API兼容。那么下面我来学习下这两个函数吧,lets go~

1、Async—声明一个异步函数(async function someName(){...})

  • 自动将常规函数转换成Promise,返回值也是一个Promise对象
  • 只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数
  • 异步函数内部可以使用await

2、Await—暂停异步的功能执行(var result = await someAsyncCall();)

  • 放置在Promise调用之前,await强制其他代码等待,直到Promise完成并返回结果
  • 只能与Promise一起使用,不适用与回调
  • 只能在async函数内部使用

3、使用小贴士:async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。

How To Use Async/Await

如何来用呢?我们一起来敲一敲代码吧~

1、async 函数的几种使用形式

浅谈Async/Await

浅谈Async/Await

2、await的用法则相对简单了许多,他后面需要是一个Promise对象,如果不是则会被转成Promise对象。只要其中一个如果Promise对象变为reject状态,那么整个async函数都会中断操作。如果状态是resolve,那么他的返回值则会变成then里面的参数,如下。

浅谈Async/Await

3、使用小贴士

  • 怎样容错呢,犹豫await后面的promise运行结果可能是rejected,最好把await放入try{}catch{}中
  • Await后的异步操作,如果彼此没有依赖关系最好同时触发,在下面场景一会有介绍
  • Await只能在async函数之中,如果在普通函数中,会报错

使用场景介绍

那么什么情况下适合用,什么情况下不适合使用呢?

1、场景一,我们同时发出三个不互相依赖的请求,如果用Async/Await就显得不明智了

浅谈Async/Await

如上图所示,上面我们A需要2s,B需要4s,C需要3s,我们如上图所示发请求,就存在彼此依赖的关系,c等b执行完,b等a执行完,从开始到结束需要(2+3+4)9s。

此时我们需要用Promise.all()将异步调用并行执行,而不是一个接一个执行,如下所示:

浅谈Async/Await

这样将会节省我们不少的时间,从原来的的9s缩减到4s,是不是很开心,耶~

2、场景二,我曾经遇到过一个场景,一个提交表单的页面,里面有姓名、地址等巴拉巴拉的信息,其中有一项是手机验证码,我们不得不等待手机验证码接口通过,才能发出后续的请求操作,这时候接口之间就存在了彼此依赖的关系,Async跟Await就有了用武之地,让异步请求之间可以按顺序执行。

其中不用Async/Await的写法,我们不得不用.then()的方式,在第一个请求验证码的接口有返回值之后,才能执行后续的的Promise,并且还需要一个then输出结果,如下图:

浅谈Async/Await

而用Async/Await的方式去写就是下面这样,我们将逻辑分装在一个async函数里。这样我们就可以直接对promise使用await了,也就规避了写then回调。最后我们调用这个async函数,然后按照普通的方式使用返回的promise。要记得容错呢~~

浅谈Async/Await

以上是两个模拟简单的场景,为的是让大家容易理解Async/Await的使用,那么接下来我们看看兼容性吧~

兼容性

Async / Await已经在大多数主流浏览器中可用。

浅谈Async/Await

小结

Async/Await让我们用少量的代码来使用Promise,我们可以将一些有依赖关系的回调函数的处理逻辑放在async里面,然后在非async的区域使用,这样可以减少then或者catch回调。

浅谈Async/Await的更多相关文章

  1. 浅谈async、await关键字 => 深谈async、await关键字

    前言 之前写过有关异步的文章,对这方面一直比较弱,感觉还是不太理解,于是会花点时间去好好学习这一块,我们由浅入深,文中若有叙述不稳妥之处,还请批评指正. 话题 (1)是不是将方法用async关键字标识 ...

  2. 浅谈async函数await用法

    今天状态不太好,睡久了懵一天. 以前只是了解过async函数,并还没有很熟练的运用过,所以先开个坑吧,以后再结合实际来更新下,可能说的有些问题希望大家指出. async和await相信大家应该不陌生, ...

  3. 浅谈async 及 await

    async 及 await 涉及面试题:async 及 await 的特点,它们的优点和缺点分别是什么?await 原理是什么? 一个函数如果加上 async ,那么该函数就会返回一个 Promise ...

  4. 浅谈C#中的 async await 以及对线程相关知识的复习

    C#5.0以后新增了一个语法糖,那就是异步方法async await,之前对线程,进程方面的知识有过较为深入的学习,大概知道这个概念,我的项目中实际用到C#异步编程的场景比较少,就算要用到一般也感觉T ...

  5. 对[yield]的浅究到发现[async][await]

    原文:对[yield]的浅究到发现[async][await] 上篇对[foreach]的浅究到发现[yield]写完后,觉得对[yield]还没有理解清楚,想起曾经看过一位大牛的帖子讲的很深刻(链接 ...

  6. $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  7. [C#]6.0新特性浅谈

    原文:[C#]6.0新特性浅谈 C#6.0出来也有很长一段时间了,虽然新的特性和语法趋于稳定,但是对于大多数程序猿来说,想在工作中用上C#6.0估计还得等上不短的一段时间.所以现在再来聊一聊新版本带来 ...

  8. 浅谈surging服务引擎中的rabbitmq组件和容器化部署

    1.前言 上个星期完成了surging 的0.9.0.1 更新工作,此版本通过nuget下载引擎组件,下载后,无需通过代码build集成,引擎会通过Sidecar模式自动扫描装配异构组件来构建服务引擎 ...

  9. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

随机推荐

  1. 忙了好一阵,今天随便写篇关于canvas的小东西

    前几天在朋友圈发了几条3D demo视频,其中就有3D空间组成各种图形.如上! 那么这些图形的每个mesh的坐标可不是手动去写,如果你愿意我当然不拦着!所以今天这篇就来介绍如何获得这些图形的坐标数据. ...

  2. Evolutionary Computing: 2. Genetic Algorithm(1)

    本篇博文讲述基因算法(Genetic Algorithm),基因算法是最著名的进化算法. 内容依然来自博主的听课记录和教授的PPT. Outline 简单基因算法 个体表达 变异 重组 选择重组还是变 ...

  3. 通过匹配绑定select option的文本值 模糊匹配

    //通过匹配绑定select option的文本值 模糊匹配 $(".class option:contains('文本值')").attr("selected&quot ...

  4. django user模块改写

    示例一:继承AbstractBaseUser,AbstractBaseUser只有三个字段password,last_login,is_active,以及需要复习的两个方法 def get_full_ ...

  5. SSO单点登录设计

    关键字: 单点登录 SSO Session 单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用,而在架构单点登录时,也会遇到一些小问题,在不同的应用环境中可以采用 ...

  6. Requests 校花网图片爬取

    纪念我们闹过的矛盾,只想平淡如水 import requestsimport reurl = 'http://www.xiaohuar.com/list-1-%s.html'for i in rang ...

  7. emptyDir与hostPath

    目录 Volume类型 emptyDir hostPath Volume类型 volume是kubernetes Pod中多个容器访问的共享目录.volume被定义在pod上,被这个pod的多个容器挂 ...

  8. 彻底卸载Oracle database 12c教程

    1.WIN+R,然后输入regedit,回车:2.在注册表中,进入目录:\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services,删除所有以oracl ...

  9. Bootstrap学习笔记-响应式布局原理

    响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...

  10. 编译安装lamp (php)

    用户账号及权限管理 用户账号:'user'@'host' user: 用户名 host: 此用户访问mysqld服务时允许通过哪些主机远程创建连接: host类型:IP.网络地址.主机名.通配符(%和 ...