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 相关文章推荐
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
原生js实现公告滚动效果
Jan 10 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
JS实现购物车基本功能
Nov 08 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中使用Oracle数据库(3)
2006/10/09 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
AJAX的使用方法详解
2017/04/29 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
js实现随机点名功能
2020/12/23 Javascript
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python实现数字炸弹游戏程序
2020/07/17 Python
flask开启多线程的具体方法
2020/08/02 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
技校生自我鉴定
2013/12/08 职场文书
学校就业推荐信范文
2014/05/19 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
古诗之感恩老师
2019/10/24 职场文书