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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
基于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
浅谈php扩展imagick
2014/06/02 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
用python处理MS Word的实例讲解
2018/05/08 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python 实现list或string按指定分段
2019/12/25 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python中有帮助函数吗
2020/06/19 Python
python3中布局背景颜色代码分析
2020/12/01 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫