async和await 语法糖使用方法

椰子小姐姐

已于 2022-04-19 14:48:04 修改

阅读量368

点赞数

分类专栏：前端技术文章标签： javascript 前端 vue

于 2022-03-24 10:18:49 首次发布

本文链接：https://blog.csdn.net/hlpp123/article/details/123691549

版权

前端技术专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1. await 后面接一个return new promise 的函数并且执行它

2. await 只能放到async 函数里面

3. 使用await 使我们的异步代码更像同步代码

从一个小demo理解async 和await 的使用方法

function fn(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            console.log(1);
        },1000);
    })
}
async function test1(){
    await fn()
    console.log(2)
}
test1()
console.log(3)
//3
//1

代码从上往下执行先打印出3，因为fn 函数是同步的，所以先打印出1，没有resolve 返回结果，所以2 不执行

function fn(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            console.log(1);
            resolve();
        },1000);
    })
}
async function test1(){
    await fn()
    console.log(2)
}
test1()
console.log(3)
//3
//1
//2

fn函数相比之前多了resolve()返回结果，说明promise成功了，2就可以成功执行。返回结果为3,1,2