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

相关推荐
黄智勇1 分钟前
xlsx-handlebars 一个用于处理 XLSX 文件 Handlebars 模板的 Rust 库,支持多平台使
前端
brzhang1 小时前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang1 小时前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
爱看书的小沐2 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
井柏然2 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
IT_陈寒3 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry3 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然3 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊4 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang4 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构