async 和 await使用的介绍

async 和 await的使用

1、先看实际开发中的代码。

const getList = async () => {
      try {
      //这里是一个axios 请求 getWorkList是请求的api
        const sd = await proxy.$api.getWorkList({
          work_id: proxy.$route.query.work_id
        })
        data.creatorList = sd //获取到后台返回的数据
      } catch (err) {
        console.log(err)
      }
    }

2、为什么要用async 和 await
是为了使异步的调用 像同步一样来执行。以同步的写法实现异步调用。

3、async做了什么
async函数会返回一个promise，并且Promise对象的状态值是成功的。
如果在async函数中没有写return，那么Promise对象resolve的值就是是undefined。
反之返回值就是你return的值。另外await只能放在async函数里。

4、await 做了什么
await会阻塞后面的代码,等待async执行结果。async 表达式的结果，就是await要等的东西。
async的结果有两种：
是promise：
假如 promise 成功了，然后把 resolve 的参数作为 await 表达式的运算结果。
假如 promise 失败了，对await来说就算是失败了，下面的代码就不会执行。
不是promise：把这个非promise的东西，作为 await表达式的结果。

5、下面写个简单的代码执行一下。

function fn(){
    return new Promise(resolve=>{
        console.log(1)
    })
}
async function f1(){
    await fn()
    console.log(2)
}
f1()
console.log(3)
//1
//3
//因为没有resolve结果，所以await拿不到值，因此不会打印2

function fn(){
    return new Promise(resolve=>{
        console.log(1)
        resolve()
    })
}
async function f1(){
    await fn()
    console.log(2)
}
f1()
console.log(3)
//1
//3
//2
//这个代码与前面相比多了个resolve说明promise成功了，所以await能拿到结果，因此就是1 3 2

写在最后：在日常项目开发中，有需要使用同步的时候，使用async 和 await配合，可以实现异步代码同步执行的效果。