当前位置: 首页 > news >正文

VUE---await的运用

通常在做VUE进行异步请求,都是使用常规的请求,然后在回调里面进行业务以及页面的渲染调整。

使用await能够简便很多,而且在循环里面使用await可以进行按顺序请求。

基础使用:在VUE组件里面,await 函数需要在 async 函数里面进行配合使用,常见于:createdmounted 或自定义方法:

export default {data() {return {userData: null,error: null};},async created() {try {// 等待异步操作完成this.userData = await fetchUserData(); // 假设 fetchUserData 返回 Promise} catch (err) {this.error = "获取数据失败";}}
};

处理多个异步请求:

async mounted() {try {const [data1, data2] = await Promise.all([fetchData1(),fetchData2()]);this.data1 = data1;this.data2 = data2;} catch (err) {// 统一错误处理
  }
}

集合for of 循环,可以实现按顺序执行:顺序执行:for...of 或 for 循环

async function fetchUsersSequentially(userIds) {const users = [];for (const id of userIds) {// 每次迭代等待前一个请求完成const user = await fetchUser(id);users.push(user);}return users;
}

forEach方法:不支持在回调中使用 await!因为 forEach 不会等待异步操作完成。

同样 for in 循环也不能。 for in 适用于枚举,for of适用于迭代对象:

image

示例:

const arr = [10, 20, 30];// for...of 遍历值
for (const value of arr) {console.log(value); // 输出: 10, 20, 30
}// for...in 遍历索引(不推荐用于数组)
for (const index in arr) {console.log(index); // 输出: "0", "1", "2"(字符串类型)
}

遍历对象:

const obj = { a: 1, b: 2 };// for...of 不能直接用于普通对象(会报错)
// for (const value of obj) { ... } // TypeError: obj is not iterable// for...in 遍历对象的键
for (const key in obj) {console.log(key); // 输出: "a", "b"console.log(obj[key]); // 输出: 1, 2(需手动访问值)
}

打完收工!

http://www.hskmm.com/?act=detail&tid=27924

相关文章:

  • 供应链业务架构设计概览
  • VS Code保存.vue文件自动格式化标签的问题
  • 基于最小二乘(LS)信道估计的MATLAB实现
  • 让老弟做个数据同步,结果踩了 7 个大坑!
  • 2025焊接件加工制造厂家口碑最新推荐榜:实力工艺与市场口碑
  • 2025机械加工厂家实力排行榜:技术精度与供货效率权威测评
  • 2025 年最新推荐!依托优质运输网络的国际搬家海运公司排行榜:覆盖澳洲多地家具海运需求澳洲/悉尼/墨尔本/大型家具海运公司推荐
  • 完整教程:计算机环境、用户与系统变量
  • 2025耐磨轮胎厂家TOP5推荐:超强抓地力与持久耐用性深度
  • CF做题记录
  • 2025 年中国搬家服务公司最新推荐榜:聚焦海运移民家具运输等需求,精选优质企业实测解析国际/国际海运/国际移民/家具海运/回国搬家海运公司推荐
  • NVIDIA CUDA 镜像 Docker 容器化部署全流程
  • AI时代,程序员的核心竞争力:从“编码工匠”到“元问题架构师”的终极进化
  • 小雅
  • 易基因:JEM(IF10.6):单细胞转录组测序(scRNA-seq)揭示过敏性肺部疾病的调控网络|项目文章
  • Services.AddRazorPages解释
  • 2025 年金属线槽厂家最新推荐排行榜:涵盖不锈钢、铝合金、防火等多类型产品,助您精准挑选优质厂家企业
  • 02_通讯录实现
  • 2025 空气离合器生产厂家最新推荐榜:电网冲击缓解技术测评与可靠性排行,含单片多片机型及核心部件企业
  • 2025 气动离合器厂家最新推荐榜权威发布:聚焦博得 PLC 技术与新兴品牌降本优势多片式气动离合器/气动离合器电磁阀/气动离合器气缸/气动离合器摩擦片/单片式气动离合器厂家推荐
  • Unicode 编码解码工具类
  • 2025 木粉源头厂家最新推荐榜:全品类适配 / 稳定供应 / 技术赋能品牌权威解析,采购必看杂/刨花/木塑/化工/造纸/香/猫砂木粉厂家推荐
  • mergeGDS
  • 读书笔记
  • 有奖话题:Data Agent for Meta 能否成为企业级 “数据大脑”?
  • 汉印打印机N41BT驱动 安装后无法打印
  • 新的练习项目
  • 最简单的 Web 打印方案:用 5 分钟上手 web-print-pdf(npm 包) - 实践
  • 2025 年塑木厂家最新推荐:实力厂家排行榜 —— 含围栏地板栈道等产品企业技术服务优势解析塑木地板/栈道/护栏/门板/凉亭/墙板/托盘厂家推荐
  • 如何将GIS属性一键快速标注到AutoCAD图纸上?