Uniapp当中的async/await的作用

一、原始代码的行为(使用 async/await

javascript 复制代码
const getUserMessagePlan = async () => {
  // 等待两个异步操作完成
  const tabsList = await message.getTagesList();        // 等待获取标签列表
  const tagsStateList = await message.getTagsStateList(); // 等待获取状态列表

  // 后续代码在数据就绪后执行
  const tempMessageList = [];
  for (let i = tabsList.length - 1; i >= 0; i--) {
    const user = await message.getUserInfo(tabsList[i].senderId); // 等待获取用户信息
    // 构造数据对象
    const t = { ... };
    tempMessageList.push(t);
  }
  userMessageList.value = sortData(tempMessageList);
};

关键特性

await 会暂停当前函数的执行,直到 Promise 完成,并按顺序解析结果。

• 所有异步操作(如网络请求)会按代码顺序依次执行,确保数据就绪后才进行后续处理。


二、删除 async/await 的后果

若直接删除 async/await,代码会变成:

javascript 复制代码
const getUserMessagePlan = () => {
  // 直接获取 Promise 对象(未等待结果)
  const tabsList = message.getTagesList();        // 返回未完成的 Promise
  const tagsStateList = message.getTagsStateList(); // 同上

  // 此时 tabsList 和 tagsStateList 是 Promise 对象,而非实际数据
  const tempMessageList = [];
  for (let i = tabsList.length - 1; i >= 0; i--) { // ❌ 报错:tabsList 是 Promise,无 length
    const user = message.getUserInfo(tabsList[i].senderId); // 同样返回 Promise
    const t = { ... }; // 此时 user 是未完成的 Promise,数据无效
    tempMessageList.push(t); // 填充无效数据
  }
  userMessageList.value = sortData(tempMessageList); // 数据混乱
};

具体问题

  1. Promise 未被解析tabsListtagsStateList 会直接返回 Promise 对象,而非实际数据。
  2. 循环逻辑崩溃 :尝试访问 tabsList.length 时会报错,因为 tabsList 是 Promise(没有 length 属性)。
  3. 数据无效message.getUserInfo 返回的 Promise 未被等待,user 变量将是一个未完成的 Promise,无法获取 uidavatar 等字段。
  4. 最终结果错误tempMessageList 中填充的是 Promise 对象,而非真实数据,导致渲染或后续处理失败。

三、如何正确优化?

方案一:保留 async/await(推荐)

保持原有逻辑,确保异步操作按顺序执行:

javascript 复制代码
const getUserMessagePlan = async () => {
  const [tabsList, tagsStateList] = await Promise.all([
    message.getTagesList(),
    message.getTagsStateList()
  ]);
  // 并行请求优化(减少总耗时)
  // ...
};
方案二:改用 Promise.then() 链式调用

若不使用 async/await,需手动处理 Promise 链:

javascript 复制代码
const getUserMessagePlan = () => {
  message.getTagesList()
    .then(tabsList => message.getTagsStateList().then(tagsStateList => {
      const tempMessageList = [];
      const promises = tabsList.map((tab, i) => 
        message.getUserInfo(tab.senderId).then(user => ({
          uid: user.uid,
          // ...
        }))
      );
      return Promise.all(promises);
    }))
    .then(tempMessageList => {
      userMessageList.value = sortData(tempMessageList);
    });
};

缺点:代码嵌套复杂,可读性差。


四、总结

必须使用异步控制async/awaitPromise.then() 是处理异步操作的唯一可靠方式。

删除 async/await 的后果 :数据未就绪时执行后续代码,导致逻辑错误和渲染异常。

优化建议 :若需提升性能,可并行请求(如 Promise.all),但不可省略异步控制关键字。

相关推荐
CC码码2 分钟前
前端2D地图和3D场景中的坐标系
前端·3d·js
慧一居士9 分钟前
Vue 中 <keep-alive> 功能介绍,使用场景,完整使用示例演示
前端·vue.js
xixixin_12 分钟前
【React】节流会在react内失效??
开发语言·前端·javascript·react
I like Code?13 分钟前
Ant Design Landing模版使用教程-react-npm
前端·react.js·npm
光影少年15 分钟前
React Navite 第二章
前端·react native·react.js·前端框架
晴殇i15 分钟前
解锁Web Workers:解决90%前端性能瓶颈的利器
前端·javascript·vue.js
@PHARAOH16 分钟前
HOW - React 状态模块化管理和按需加载(二)- 不同状态库哲学
前端·react.js·前端框架
路光.18 分钟前
React中Suspense的分包实践
前端·react.js·typescript
小飞大王66620 分钟前
前端React实战项目 全球新闻发布系统
前端·react.js·前端框架
码上成长22 分钟前
qiankun 微前端完全入门指南 - 从零到精通
前端