async 和 await使用的介绍

柔光的暖阳◎ 2023-01-18 12:20 168阅读 0赞

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配合，可以实现异步代码同步执行的效果。