async和await

在日常开发中会经常遇到需要等待异步方法执行完毕后再去执行某些操作的情况，通常我会选择promise来解决异步问题，
测试代码

此出用一个定时器模拟异步方法

 setTimeout(function () {
            var a = '我是异步数据'
            return a
        }, 1000)

我们想要获取到这个异步方法的返回值后然后将他打印出来
先试试正常的调用

function test1(){
    setTimeout(()=>{
        var a = '我是异步数据'
        return a
    })
    console.log(a)
}
test1()

image.png

可以看到，报错了，说a没有定义
这是因为test1这个方法很快就执行完了，而定时器的回调函数是会被挂在到任务队列里面去的，需要等所有代码执行完毕后，才会去执行队列里的任务，所以在执行那句 console.log(a)的时候，定时器里的回调函数并没有执行，也就出现了最终的结果，报错了

下面使用promise来解决一下这个异步问题

在test1函数中返回一个promise对象

function test1() {
    return new Promise(function(resolve,reject){
        setTimeout(function () {
            var a = '我是异步数据'
            resolve(a)
        }, 1000)
    }).then(data=>{
        console.log(data)
    })
}
test1()

image.png

结果成功打印

接下来通过一个 async await 来解决一下这个问题
async：将一个方法生命为异步方法；
await：只能在async 生命的方法中使用，会等待 await后面的方法执行完之后，才之代码的下文

async function test3(){
    return '我是async生命的方法的返回值'
}
console.log(test3())

image.png

可以看到async 生命过的方法他的返回值并不是一个字符串，而是一个promise对象
那么我们要如何获取这个字符串呢，很简单

async function test3(){
    return '我是async生命的方法的返回值'
}

async function test4(){
    let data = await test3()
    console.log(data)
}
test4()

image.png

只需要再用async声明一个异步方法，然后在函数体里面使用await 来等待第一个异步方法执行结束，这样，就可以直接获取到字符串了

接下来用async await来解决上面的异步问题

 function test1() {
    return new Promise(function(resolve,reject){
        setTimeout(function () {
            var a = '我是异步数据'
            resolve(a)
        }, 1000)
    })
}

async function test2(){
    let data = await test1()
    console.log(data)
}
test2()

image.png

在第一个方法里返回一个promise对象，然后将第二个方法声明为异步方法，重复上面的步骤，一样可以打印出值来

以上代码写的很渣，仅供参考！！！