async和await 语法糖使用方法

椰子小姐姐

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

阅读量438

点赞数

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/hlpp123/article/details/123691549

前端技术专栏收录该内容

6 篇文章

订阅专栏

本文通过实例解析async和await在JavaScript中的使用，讲解了如何使异步代码更像同步，以及如何正确配合Promise实现任务流程控制。重点在于理解await的放置规则和解决返回值问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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