• .then

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

• async await

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

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

  不关心返回值
  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后面

  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支持请求并行，需要多个请求并行时，会更节省时间。

  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
下载后如有问题，欢迎在评论区留言交流。