JS中async/await实现异步调用的方法
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 异步调用
问题 可修改下面的 aa() 函数,目的是在一抄后用 console.log() 输出 want-value function aa() { setTimeout(function() { return "want-value"; }, 1000); } 但是,有额外要求: aa() 函数可以随意修改,但是不能有 console.log() 执行 console.log() 语句里不能有 setTimeout 包裹 解答 也许这是个面试题,管它呢.问题的主要目的是考察对异步调用执行结果
-
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
封装Ajax 设计Async.Operation的最初目的就是解决Ajax调用需要传递callback参数的问题,为此我们先把Ajax请求封装为Async.Operation.我在这里使用的是jQuery,当然无论你用什么基础库,在使用Async.Operation时都可以做这种简单的封装. 复制代码 代码如下: var Ajax = {}; Ajax.get = function(url, data) { var operation = new Async.Operation(); $.get
-
JavaScript异步调用定时方法并停止该方法实现代码
复制代码 代码如下: (function() { var t = window.setInterval(function() { $('#ajaxGame').load('RefreshCurrentPlayerServlet #ajaxGame', function() { youWin(); youlose(); }); }, 10000); function youWin() { if ($('#status:contains("YOU ARE THE WINNER!")').l
-
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
问题 在Ajax应用中,调用XMLHttpRequest是很常见的情况.特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成.然而在单线程的JavaScript编程中,XHR异步调用的代码风格实在是与一般的JavaScript代码格格不入. 额外参数 考虑一个除法函数,如果它是纯客户端的同步函数,那么签名会是这样的: function divide(operand1, operand2) 然而假设我们对客户端除法的精度不满意,于是把除法转移到服务器端来执行
-
JavaScript 异步调用框架 (Part 4 - 链式调用)
现实开发中,要按顺序执行一系列的同步异步操作又是很常见的.还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息.这就是多个需要顺序执行的异步请求. 为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅. 传统做法 大多数程序员都能够很好的理解顺序执行的代码,例如这样子的: 复制代码 代码如下: var firstResult
-
.NET中的async和await关键字使用及Task异步调用实例
其实早在.NET 4.5的时候M$就在.NET中引入了async和await关键字(VB为Async和Await)来简化异步调用的编程模式.我也早就体验过了,现在写一篇日志来记录一下顺便凑日志数量(以后面试之前可以用这个"复习"一下). (一)传统的异步调用 在比较"古老"的C#程序中经常可以看到IAsyncResult.BeginInvoke之类的异步调用"踪迹".先来简单的复习一下吧. 假如我们有一个方法生成字符串,而生成这个字符串需要10秒
-
JS中async/await实现异步调用的方法
async/await多个函数关联调用 async/await使得异步代码看起来像同步代码 async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值 Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码 async声明一个异步函数 await只能在async函数中使用,后面跟一个promise对象 所以在模拟异步调用函数时,函数体内返回promise as
-
Js中async/await的执行顺序详解
前言 虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上
-
Spring中@Async注解执行异步任务的方法
引言 在业务处理中,有些业务使用异步的方式更为合理.比如在某个业务逻辑中,把一些数据存入到redis缓存中,缓存只是一个辅助的功能,成功或者失败对主业务并不会产生根本影响,这个过程可以通过异步的方法去进行. Spring中通过在方法上设置@Async注解,可使得方法被异步调用.也就是说该方法会在调用时立即返回,而这个方法的实际执行交给Spring的TaskExecutor去完成. 代码示例 项目是一个普通的Spring的项目,Spring的配置文件: <?xml version="1.0&
-
JS基于ES6新特性async await进行异步处理操作示例
本文实例讲述了JS基于ES6新特性async await进行异步处理操作.分享给大家供大家参考,具体如下: 我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: c
-
三分钟学会用ES7中的Async/Await进行异步编程
本文介绍了三分钟学会用ES7中的Async/Await进行异步编程,分享给大家,具体如下: Async/Await基本规则 async 表示这是一个async函数,await只能用在这个函数里面. await 表示在这里等待promise返回结果了,再继续执行. await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了-) 一个Async/Await例子 Async/Await应该是目前最简单的异步方案了,首先来看个例子. 这里我们要实现
-
深入理解js 中async 函数的含义和用法
一.终极解决 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底.它们都有额外的复杂性,都需要理解抽象的底层运行机制. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. 二.async 函数是什么? 一句话,
-
详解ES6之async+await 同步/异步方案
异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景 先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [
-
JavaScript中async,await的使用和方法
JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log(hellworld()); // 您好!美好世界! async function asyHellworld() { return "您好!美好世界!"; } console.log(asyHellworld()); // Promise { '您好!美好世界!' } 普通函数 hellworld 将简单地返回字符
-
Spring中@Async注解实现异步调详解
异步调用 在解释异步调用之前,我们先来看同步调用的定义:同步就是整个处理过程顺序执行,当各个过程都执行完毕,并返回结果. 异步调用则是只是发送了调用的指令,调用者无需等待被调用的方法完全执行完毕,继续执行下面的流程.例如, 在某个调用中,需要顺序调用 A, B, C三个过程方法:如他们都是同步调用,则需要将他们都顺序执行完毕之后,过程才执行完毕: 如B为一个异步的调用方法,则在执行完A之后,调用B,并不等待B完成,而是执行开始调用C,待C执行完毕之后,就意味着这个过程执行完毕了. 概述说明 Sp
-
浅谈JS中的常用选择器及属性、方法的调用
选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="
随机推荐
- AngularJS 限定$scope的范围实例详解
- 用vbs在 HTA 内对脚本进行编码的方法
- VBScript Enun Remote CMD Shell代码
- java调用淘宝api联网查询ip归属地
- ASP.NET封装的SQL数据库访问类
- 基于mysql的论坛(3)
- js 打开新页面在屏幕中间的实现方法
- python 开发的三种运行模式详细介绍
- 详谈JS中数组的迭代方法和归并方法
- javascript实现给定半径求出圆的面积
- ajax交互Struts2的action(客户端/服务器端)
- 使用原生js封装的ajax实例(兼容jsonp)
- jQuery筛选器children()案例详解(图文)
- 解决jquery中美元符号命名冲突问题
- C语言超市管理系统设计
- Java线程协调运行操作实例详解
- 关于Laravel参数验证的一些疑与惑
- 详解重置Django migration的常见方式
- thinkPHP框架动态配置用法实例分析
- 聊聊Vue中provide/inject的应用详解