理解async和await-优快云博客

本文介绍了JavaScript中的async和await关键字的简单使用。async用于修饰函数，返回一个Promise对象。当async函数内部抛出错误时，会调用Promise.reject。要获取async函数的结果，需使用then或catch。await可以等待异步操作完成，使代码看起来更同步，但它实际上仍执行异步操作。当await后面是Promise，它会阻塞后续代码直到Promise解决。

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

首先我们来了解一下async的作用:简化在函数返回值中对promise对象的创建，用于修饰函数放在函数声明的最前面被修饰的函数返回值一定是一个Promise对象

async的简单使用

1.函数声明形式写法，他会当一个关键字放入到函数最前面

//
astnc function fn(){
 return "你好";
}

如何调用呢？async也是函数啊，所以他和普通函数调用是没有什么区别的，我们可以直接加括号就好。下面我们通过console.log运行一下

   async function fn() {
　　return '你好';
}
console.log(fn());

我们看一下输出结果如图所示:
在这里插入图片描述解析:这个我们可以看到调用后会返回一个promise对象。
，并且promise还有status和value，如果带有async函数中返回值，当调用函数时，内部会调用promise.volve（）的方法所以会把它转化为一个promise的这个对象返回，不过如果fn函数内部抛出错误呢？

 async function fn() {
　　throw new Error("aaa");
}
console.log(fn());

解析:他就会调用promise.reject()返回一个promise对象
在这里插入图片描述如果想要获取async函数执行的结果，就必须要调用promise的then或者catch来给他注册回调函数

    async function fn() {
　　return "aaa";
}
 fn().then(result =>{
     console.log(result);
 })

输出结果如图所示：
在这里插入图片描述

await的简单使用

// 这里模拟一个耗时操作
function asyncFunc() {
 return new Promise( resolve => {
  setTimeout(() => {
   resolve(100)
  }, 1000);
 })
}

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    
}

fn()

输出结果如图所示: 在这里插入图片描述

一秒后打印出了100，async和await搭配使用，await可以接收异步函数，整个过程看上去有点像同步代码，但其实是异步操作。
我们在fn()上加上一行代码

async function fn () {
 let a = await asyncFunc();
 console.log(a);                   
 console.log(200);                    
}

输出结果如图所示：在这里插入图片描述

解析：执行上面代码看到两次都是在暂停一秒打印出来的，这说明await的后面如果是promise(耗时操作)，它会阻塞整个函数，下面的代码不会执行。