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),但不可省略异步控制关键字。

相关推荐
kilito_016 分钟前
uniapp 微信小程序 列表点击分享 不同的信息
微信小程序·小程序·uni-app
Mintopia8 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy9 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia9 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
陌小路15 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213822 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36531 分钟前
antd 组件部分API使用方法
前端
BillKu34 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL36 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js