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()获取返回的结果