async/await让异步操作同步执行的方法详解

一.前言

我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了

二.异步操作会带来什么问题

异步操作可能会许多的问题,下面是常见的两种

1.函数执行的结果并不是按照顺序返回

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },3000)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();

//结果
//111
//222
//wait me 3000

上面的代码,如果你期待的结果是

//111
//wait me 3000
//222

那就错了,因为fn1函数里面还有一个函数setTimeout,这两个函数是异步执行的,而fn1和fn2是同步执行的,先执行fn1再执行fn2,在执行fn1的时候打印结果111,三秒后再执行setTimeout,但是在这三秒之前已经执行完了fn2

那是不是由于setTimeout函数设置的等待时间太久了才会导致的呢?那下面我把时间设为0

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },0)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();
//结果
//111
//222
//wait me 3000

从结果上看并没有改变,这是应为setTimeout这个函数在执行之前会查看执行队列看看有没有人在排队,如果有,那么将等其他的函数执行完再执行自己,所以不管就算你设置时间为0,也不会改变它最后一个执行

2.在外部获取不到异步函数里的值

下面我们看一个最简单的例子,我的需求是要在fn1函数外面打印msg

function fn1(){
 setTimeout(function(){
  msg='wait me 3000';
 },3000);
}
fn1();

那么怎么样才能获取到msg呢

使用回调函数

function fn1(callback){
 setTimeout(function(){
  msg='wait me 3000';
  callback(msg);
 },3000);
}
fn1(data=>{
 console.log(data);//wait me 3000
});

使用Promise

function fn1(){
 return new Promise(function(res,rej){
  setTimeout(function(){
   msg='wait me 3000';
   res(msg);
  },3000);
 })
}
fn1().then(data=>{
 console.log(data)
})

三.async/await解决方案

async/await的作用就是使异步操作以同步的方式去执行

异步操作同步化?

可以使用Promise中的then()来实现,那么async/await与它之间有什么区别呢

1.async函数返回的是一个Promise对象

如果一个函数加了async关键词,这个函数又有返回值,在调用这个函数时,如果函数执行成功,内部会调用Promise.solve()方法返回一个Promise对象,如果函数执行出现异常,就会调用Promise.reject()方法返回一个promise 对象

要想获取到async函数的执行结果，就要调用Promise的then或catch来给它注册回调函数

async function fn(){
 return '111'
}
console.log(fn());//Promise { '111' }

既然是Promise对象,因此可以使用then()获取返回的结果

async function fn(){
 return '111'
}
fn().then(data=>{
 console.log(data)//111
})

2.await

上面介绍了async的作用,一般情况下,async与await配合使用才能使异步操作同步化,await就是等待的意思,等待某一个函数执行完之后,后面的代码才能开始执行

function fn1(){
 return new Promise(resolve=>{
  setTimeout(function(){
   msg='wait me 3000';
   resolve(msg)
  },3000);
 });
}
async function asyncCall(){
 var result=await fn1();
 console.log(result);
}
asyncCall();

如果我们没有等待fn1执行完之后再打印result,那么有可能得到是undefined

四.总结

在很多的时候,我们是希望按照同步的方式来获得异步函数的结果,比如登录时,我们必须要在后台返回匹配成功的信息之后才能进行页面跳转,因此,使异步操作同步化这是很重要的知识点,但是这种方案是基于Promise的基础之上的,因此在学习该知识时,一定要对Promise有充分的理解

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 三分钟学会用ES7中的Async/Await进行异步编程

    本文介绍了三分钟学会用ES7中的Async/Await进行异步编程,分享给大家,具体如下: Async/Await基本规则 async 表示这是一个async函数,await只能用在这个函数里面. await 表示在这里等待promise返回结果了,再继续执行. await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了-) 一个Async/Await例子 Async/Await应该是目前最简单的异步方案了,首先来看个例子. 这里我们要实现

  • 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基于ES6新特性async await进行异步处理操作示例

    JS基于ES6新特性async await进行异步处理操作示例

    本文实例讲述了JS基于ES6新特性async await进行异步处理操作.分享给大家供大家参考,具体如下: 我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: c

  • 详解async/await 异步应用的常用场景

    前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代码,从而影响执行效率.下面将简单地描述一下一些日常常用场景,加深对 async/await 认识 最普遍的异步操作就是请求,我们也可以用 setTimeOut 来简单模拟异步请求. 场景1. 一个请求接着一个请求 相信这个场景是最常遇到,后一个请求依赖前一个请求,

  • 详解用async/await来处理异步

    昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 async function timeout() { return 'hello world'; } 语法很简单,就是在函数前面加上asyn

  • async/await与promise（nodejs中的异步操作问题）

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • NodeJs通过async/await处理异步的方法

    场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo数据库的操作,感受一下. mongoDb.open(function(err, db){ if(!err){ db.collection("users", function(err, collection){ if(!err){ let person = {name: "yika&q

  • 详解ES6之async+await 同步/异步方案

    异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景 先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [

  • async/await让异步操作同步执行的方法详解

    一.前言 我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了 二.异步操作会带来什么问题 异步操作可能会许多的问题,下面是常见的两种 1.函数执行的结果并不是按照顺序返回 function fn1(){ console.log(111) setTimeout(function(){ console.log('wait

  • Golang控制协程执行顺序方法详解

    目录 循环控制 通道控制 互斥锁 async.Mutex 在 Go 里面的协程执行实际上默认是没有严格的先后顺序的.由于 Go 语言 GPM 模型的设计理念,真正执行实际工作的实际上是 GPM 中的 M(machine) 执行器,而我们的协程任务 G(goroutine) 协程需要被 P(produce) 关联到某个 M 上才能被执行.而每一个 P 都有一个私有队列,除此之外所有的 P 还共用一个公共队列.因此当我们创建了一个协程之后,并不是立即执行,而是进入队列等待被分配,且不同队列之间没有顺

  • java 使用idea将工程打成jar并创建成exe文件类型执行的方法详解

    第一部分: 使用idea 打包工程jar 1.准备好一份 开发好的 可执行的 含有main方法的 工程. 例如:我随便写的main方法 public static void main(String[] args) throws IOException { Properties properties = System.getProperties(); String osName = properties.getProperty("os.name"); System.out.println

  • Java JDBC批量执行executeBatch方法详解

    JDBC事务 在数据库中,所谓事务是指一组逻辑操作单元,使数据从一种状态变换到另一种状态.为确保数据库中数据的一致性,数据的操纵应当是离散的成组的逻辑单元:当它全部完成时,数据的一致性可以保持,而当这个单元中的一部分操作失败,整个事务应全部视为错误,所有从起始点以后的操作应全部回退到开始状态. 事务的操作:先定义开始一个事务,然后对数据作修改操作,这时如果提交(COMMIT),这些修改就永久地保存下来,如果回退(ROLLBACK),数据库管理系统将放弃您所作的所有修改而回到开始事务时的状态. 事

  • 使用async、enterproxy控制并发数量的方法详解

    使用async、enterproxy控制并发数量的方法详解

    聊聊并发与并行 并发,在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. 并发我们经常提及之,不管是web server,app并发无处不在,操作系统中,指一个时间段中几个程序处于已经启动运行到完毕之间,且这几个程序都是在同一处理机上运行,并且任一个时间点只有一个程序在处理机上运行.很多网站都有并发连接数量的限制,所以当请求发送太快的时候会导致返回值为空或报错.更有甚者,有些网站可能因为你发出

  • Java实现多线程同步五种方法详解

    一.为什么要线程同步 因为当我们有多个线程要同时访问一个变量或对象时,如果这些线程中既有读又有写操作时,就会导致变量值或对象的状态出现混乱,从而导致程序异常.举个例子,如果一个银行账户同时被两个线程操作,一个取100块,一个存钱100块.假设账户原本有0块,如果取钱线程和存钱线程同时发生,会出现什么结果呢?取钱不成功,账户余额是100.取钱成功了,账户余额是0.那到底是哪个呢?很难说清楚.因此多线程同步就是要解决这个问题. 二.不同步时的代码 Bank.java package threadTe

  • Python APScheduler执行使用方法详解

    Python APScheduler执行使用方法详解

    APScheduler就是定时进行周期性的运行某些程序,在语言程序编写中,一直会遇到些定时服务,有时是根据时间定时,有时在固定的位置上进行定制,还有一些是因为储蓄出现的定时,不管是处于哪一种定时类型,基本上都可以使用APScheduler模块进行协助工作,本文给大家介绍定时模块的使用方法. APScheduler与第三方模块安装方式一样,使用pip,安装过程如下: 常见的使用方式 1.APScheduler支持触发器: DateTrigger IntervalTrigger CronTrigge

  • 使用ajax的post同步执行(实现方法)

    一般我们使用的ajax请求时,都是异步的在结果运行以后,在方法外是得不到参数的,但是使用同步执行的时候是可以返回data的. ajaxSettings.async参数进行设置,默强调内容认情况下是true,即异步,同步时在方法前设置: $.ajaxSettings.async = false;此时在方法执行完,能return出相应的data. 代码块 /** * 得到列表 */ function flowAtoms(){ //请求接口 var listUrl = getServerUrl('XX

  • Go语言同步等待组sync.WaitGroup结构体对象方法详解

    Go语言同步等待组sync.WaitGroup结构体对象方法详解

    目录 sync.WaitGroup结构体对象 WaitGroup的结构体 Add()方法 Done()方法 Wait()方法 Add().Done().Wait()三者对比 sync.WaitGroup使用示例 sync.WaitGroup结构体对象 在Go语言中,sync.WaitGroup结构体对象用于等待一组线程的结束:WaitGroup是go并发中最常用的工具,我们可以通过WaitGroup来表达这一组协程的任务是否完成,以决定是否继续往下走,或者取任务结果: WaitGroup的结构体

  • java执行SQL语句实现查询的通用方法详解

    完成SQL查询 并将查询结果放入Vector容器,以便其他程序使用 /* * 执行sql查询语句 */ public static <T> Vector<T> executeQuery(Class<T> clazz, String sql, Object... args) { Connection conn = null; PreparedStatement preparedstatement = null; ResultSet rs = null; Vector<

随机推荐