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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
Angular 封装并发布组件的方法示例
Apr 19 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
深入php 正则表达式的学习探讨
2013/06/06 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
小程序实现录音功能
2020/09/22 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python 多线程实例详解
2017/03/25 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
python switch 实现多分支选择功能
2020/12/21 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
六个一活动实施方案
2014/03/21 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年英语工作总结
2014/12/20 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL