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实现异步调用的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • .NET中的async和await关键字使用及Task异步调用实例

    .NET中的async和await关键字使用及Task异步调用实例

    其实早在.NET 4.5的时候M$就在.NET中引入了async和await关键字(VB为Async和Await)来简化异步调用的编程模式.我也早就体验过了,现在写一篇日志来记录一下顺便凑日志数量(以后面试之前可以用这个"复习"一下). (一)传统的异步调用 在比较"古老"的C#程序中经常可以看到IAsyncResult.BeginInvoke之类的异步调用"踪迹".先来简单的复习一下吧. 假如我们有一个方法生成字符串,而生成这个字符串需要10秒

  • 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 异步调用

    问题 可修改下面的 aa() 函数,目的是在一抄后用 console.log() 输出 want-value function aa() { setTimeout(function() { return "want-value"; }, 1000); } 但是,有额外要求: aa() 函数可以随意修改,但是不能有 console.log() 执行 console.log() 语句里不能有 setTimeout 包裹 解答 也许这是个面试题,管它呢.问题的主要目的是考察对异步调用执行结果

  • JavaScript 异步调用框架 (Part 4 - 链式调用)

    现实开发中,要按顺序执行一系列的同步异步操作又是很常见的.还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息.这就是多个需要顺序执行的异步请求. 为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅. 传统做法 大多数程序员都能够很好的理解顺序执行的代码,例如这样子的: 复制代码 代码如下: var firstResult

  • 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 异步调用框架 (Part 1 - 问题 & 场景)

    问题 在Ajax应用中,调用XMLHttpRequest是很常见的情况.特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成.然而在单线程的JavaScript编程中,XHR异步调用的代码风格实在是与一般的JavaScript代码格格不入. 额外参数 考虑一个除法函数,如果它是纯客户端的同步函数,那么签名会是这样的: function divide(operand1, operand2) 然而假设我们对客户端除法的精度不满意,于是把除法转移到服务器端来执行

  • 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进行异步处理操作示例

    本文实例讲述了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="

随机推荐