async-await和promise.then()的区别和用法

weixin_li152********2026-06-11 9:22

.then

typescript 复制代码

function getDataThen() {
    post({url: url, data: data}).then((res: any) => {
        //处理逻辑
        return data;//一般不需要
    }
}

async await

typescript 复制代码

async function getDataAsync() {
    const res = await post({url: url, data: data});
    //处理逻辑
    return data;//一般不需要
}

大多数情况，两者都是在方法内部处理业务。如果不关心返回值，直接调用即可。如果需要返回值，他们的返回值都是promise而不是直接返回数据，需要再次处理，可以使用.then或者await，但是await必须在async方法内部使用。

typescript 复制代码

不关心返回值
function search() {
  getDataThen();
  getDataAsync();
}
关心返回值
function search() {
  getDataThen().then(res: any) => {
      //处理逻辑
  };
  getDataAsync().then(res: any) => {
      //处理逻辑
  };
}
async function search() {
  const res = await getDataAsync();
  //处理逻辑
  const res2 = await getDataThen();
  //处理逻辑
}

await的后面跟的代码相当于.then内部，所以第二个请求如果必须在第一个请求返回时才开始执行，那么可以写在.then方法内部，或者跟在第一个请求的await后面

typescript 复制代码

function getDataThen() {
    post({url: url, data: data}).then((res: any) => {
        //处理逻辑
        post({url: url, data: data}).then((res: any) => {
        //处理逻辑
    }
    }
}

async function getDataAsync() {
    const res1 = await post({url: url, data: data});
    const res2 = await post({url: url, data: data});
}

async支持请求并行，需要多个请求并行时，会更节省时间。
typescript 复制代码
```
const [data1, data2] = await Promise.all([
    getData1(),
    getData2()
]);
```

最近整理了一个 Spring Boot 2 + Java 8 + Vue 3 + NaiveUI 的员工管理系统，核心功能包括：

滑块验证码登录
登录认证 + JWT
RBAC 权限管理（动态菜单）
操作日志记录
员工/部门/职位/工资信息管理
包含完整的运行文档

系统仅供学习使用，请勿用于任何商业用途。

有需要的朋友可以免费下载：

https://download.csdn.net/download/weixin_42485982/92947551

下载后如有问题，欢迎在评论区留言交流。