JS中async/await实现异步调用的方法


Posted in Javascript onAugust 28, 2019

async/await多个函数关联调用

async/await使得异步代码看起来像同步代码

async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值

Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码

async声明一个异步函数

await只能在async函数中使用,后面跟一个promise对象

所以在模拟异步调用函数时,函数体内返回promise

async/await缺点

async函数里,无论是Promise reject的数据还是逻辑报错,都会被默默吞掉。所以最好把await放入try{}catch{}中,或者在async返回的promise对象中使用.cache捕获错误。

实现

项目中实现三个不同的接口调用,三个接口是相互关联的,前一个接口的返回值是后一个接口的参数,如果使用Promise实现的话,只能实现异步调用,但是无法相互关联,也就是数据不互通,所以使用async/await实现

  • 接口调用的方法独立封装,参数可动态设置
  • async声明异步方法,内部使用await关键字调用封装的接口,参数可直接传入
  • async/await相当于将Promise异步调用同步化,数据可实现关联
  • async/await会默认返回一个Promise对象,在实际调用中使用cache捕获错误

代码实现

<script>
 //再此使用定时器模拟异步接口的调用
 // 异步函数a
 function a() {
  return new Promise(resolve => {
   setTimeout(()=>{
    resolve('a')
   }, 1000)
  })
 }
 // 异步函数b,关联a参数
 function b(a) {
  return new Promise(resolve => {
   setTimeout(()=>{
    resolve(a+'b')
   }, 1000)
  })
 }
 // 异步函数c,关联b参数
 function c(b) {
  return new Promise(resolve => {
   setTimeout(()=>{
    resolve(b+'c')
   }, 1000)
  })
 }

 // 同步执行三个关联的异步函数
 async function d(){
   const da = await a();
   const db = await b(da);
   const dc = await c(db);
   return dc;
 }

 // 实际调用
 d().then(res=>{
  console.log(res)
 }).catch(err=>{
  console.log(err)
 });
</script>

总结

以上所述是小编给大家介绍的JS中async/await实现异步调用的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript数组去掉重复
May 12 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
Vue-component全局注册实例
Sep 06 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
javascript如何实现create方法
Nov 04 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 #Javascript
详解用async/await来处理异步
Aug 28 #Javascript
vue中监听返回键问题
Aug 28 #Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 #Javascript
小程序中this.setData的使用和注意事项
Aug 28 #Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 #Javascript
vue实现标签云效果的方法详解
Aug 28 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
理解JS事件循环
2016/01/07 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python3中的json模块使用详解
2018/05/05 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
集体婚礼证婚词
2014/01/13 职场文书
学校万圣节活动方案
2014/02/13 职场文书
开业典礼主持词
2014/03/21 职场文书
教师评语大全
2014/04/28 职场文书
导游词格式
2015/02/13 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Python中rapidjson参数校验实现
2021/07/25 Python