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有充分的理解