vue中方法执行顺序问题

最新推荐文章于 2025-09-04 09:25:53 发布
原创 最新推荐文章于 2025-09-04 09:25:53 发布 · 3.1k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript #前端
文章讲述了在Vue应用中，如何通过使用async和await解决console.log()在this.getNodes获取JSON数据前执行的问题，确保异步操作完成后执行后续逻辑，实现了同步效果。
该文章已生成可运行项目，

实际应用中，需要获取json文件中的数据渲染nodes
在这里插入图片描述
运行后发现console.log(this.nodes)这行代码先于this.getNodes执行。了解原因VUE中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制，不一定一个方法执行完再执行另一个。即在此表现为this.getNodes已经开始执行，但还未完全执行结束就开始执行console.log(this.nodes)。
为了解决上面问题，让this.getNodes之心完成之后在执行下面的方法，需要引入async，await方法
async
async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async 函数返回的是一个promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
await
await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。
修改后的代码，可以实现顺序执行
在这里插入图片描述

本文章已经生成可运行项目
fanger0705
关注
Vue生命周期函数的执行顺序及异步性
CodeSpark的博客
09-29 554
Vue生命周期函数按照特定的顺序在Vue实例的不同阶段被调用，提供了执行特定操作的机会。在Vue中，生命周期函数是一组特殊的方法，它们在Vue实例的不同阶段被调用。这些生命周期函数提供了在特定时间点执行操作的机会，例如在实例创建之前或销毁之后。这是因为在这两个生命周期函数中，Vue已经将组件挂载到DOM上并完成了数据的更新，因此可能需要一些时间来等待实际的DOM操作完成。大多数Vue生命周期函数是同步执行的，意味着在一个生命周期函数中的代码执行完毕之前，下一个生命周期函数不会被调用。可能会得到空字符串。
vue 两个方法 按顺序执行
seimeii的博客
05-10 3036
new Promise(res=>{ setTimeout(()=>{ console.log(1) res() },1) }).then(res=>{ console.log(2) })
vue等待函数执行完后执行下一行命令
Aa12364567的博客
02-27 1868
vue等待函数执行完后执行下一行命令。
vue两个异步方法顺序执行
weixin_44364001的博客
01-09 1万+
需求：两个异步函数按顺序执行，首先获取第一个异步函数的返回的值，接着在第二个异步函数里面调用 方法：先在第一个异步函数里返回一个promise，接着用async和await调用它 第一个异步方法： getAllNotice() { let data = { "searchParams": [{ "fieldName": "equipmentId", "operate": "eq", "value": "000000" }], "siz
vue请求如何按顺序执行
Keep__Me的博客
11-30 4369
这时候就需要控制请求的执行顺序，这里我提供一种方法来实现请求的顺序控制，我认为这个方法写起来是最简单最容易理解的。我们有时候会碰到这种情况，需要连续发送两个请求，第二个请求需要用第一个请求的某个返回值作为参数来作为第二个请求的请求参数。首先是正常发送第一次请求，然后在第一次请求的回调函数then中，写一句return 来发送第二次请求。但是存在一个问题：两个请求都是异步的，他并不按照我们期望的先后顺序来执行。再.then，这里的返回结果就是第二次请求的结果。这样我们就实现了两个请求的顺序执行。
vue执行顺序问题 执行完一个方法后再执行另一个方法
星河的专栏
10-22 1万+
网上找的，遇到的问题，当方法调用后数据未返回就执行下一步了。 解决方法： function fun1(){ return new Promise((resolve, reject) => { /* 你的逻辑代码 */ console.log("1"); }); }, function fun2(){ return new Promise((resolve, reject) => { /* 你的逻辑代码 */ ...
Vue父子组件值同步和方法执行顺序问题
王景清的博客
03-28 1539
代码结构： 三层关系：PrototypeDrawer>TaskDrawerHeader>TaskStatus PrototypeDrawer.vue 最外层 <task-drawer-header @beforeComplete="beforeComplete"> </task-drawer-header> <script> export default { methods:{ openDrawer(){ t.
Vue3前端异步方法调用的执行顺序问题
wewowe1的博客
05-22 2844
在下面的节点单击事件方法中调用了getSheetNum()这个方法，由于这个方法每触发一次就向后台传参查询一次，所以每次执行顺序如果需要让函数在方法内先于后续代码调用，那么可以使用或 Promise 链式调用的方式来解决这个问题。awaitawait如果你不想使用，可以使用 Promise 的链式调用方式，将后续代码全部写在一个.then()回调中，并在第一个.then()回调中获取到异步方法的返回结果。
vue方法中的方法怎么同步顺序执行_关于js中循环遍历中顺序执行ajax的问题（vue）...
weixin_39616056的博客
12-21 1600
js里的循环，每次都是自顾自的走，它不等ajax执行好走完到success代码，就继续循环下一条数据了，这样数据就全乱了。后来，想到试试ajax里async这个属性，async默认是true，即为异步方式，那我改为false同步,这里主要讲解的是vue中的循环遍历中ajax执行问题。在方法前加async，在接口名前加await，这样就不会是异步调用，这样就会执行完一次ajax后才继续执行下一次循环...
vue 请求时方法执行顺序问题，异步请求无法同时处理多个接口，使用同步顺序执行：async/await使用
小糖穿越火线
11-21 6836
vue 请求时方法执行顺序问题，异步请求无法同时处理多个接口，使用同步顺序执行：async/await使用 在vue开发中项目中，有时需要在一个地方请求多个接口处理数据，然后进行渲染的步骤； 异步当数据没有返回就开始处理，导致没有拿到返回数据报错的问题； 使用async搭配await实现； 代码： 使用async，await： async _getCurrentTagsGet() { ...
vue 方法按照顺序执行
清心寡欲的博客
08-04 1万+
在调用后台方法的时候，由于调用了多个方法，但是执行的时候并没有按照顺序执行，前端需要后台返回的数据，对数据进行页面展示，由于没有按照顺序执行，导致前台页面报错。// 等待方法1、2、3 执行完成后执行方法“lastMethod”// 调用后端接口getMethod1。// 调用后端接口getMethod2。// 调用后端接口getMethod3。// 获取标签和绘制曲线数据。单独执行每个方法，并返回。// 需要执行的方法内容。...
【Vue】方法顺序执行
Hit the keyboard hard
12-27 1万+
问题提出 虽然Vue中的方法是顺序执行的，但是如果某个方法执行时间很长（比如访问后台数据接口），那后面的方法不会等这个方法执行完就会执行。这说明，同一个方法内可以顺序执行，但是多个方法之间并不能严格控制顺序执行。 解决方案 使用async和await修饰符 async mainMethod(){ await this.orderMethod1() await this.orderMethod2() await this.orderMethod3() } ...
vue方法先后顺序。等A方法运行结束才能触发B方法。cdn引入vue.js(先后顺序)
weixin_44856917的博客
06-06 626
vue方法先后顺序。等A方法运行结束才能触发B方法。cdn引入vue.js(先后顺序)主要靠watch：{}
vue的created函数中方法执行的顺序设置方法
weixin_63136716的博客
01-06 4828
vue的created函数中方法执行的顺序设置方法
VUE 方法执行顺序浅谈
u012174809的专栏
09-15 1万+
VUE中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制。 以下方法中都带有promise函数或异步调用。 initUserData() { this.getPsCountryList() // 1 获取国家列表stateOptions，方法内同步 this.getTimeZone() // 2 获取时区timezones，方法内同步 this.getUserInfo() // 3 获取用户信息 } 在实际运行中，三个方法的执行顺.
Vue的v-model指令与方法绑定执行顺序所导致的数据更新不及时问题
qq_39438464的博客
05-18 3652
Vue的v-model指令与方法绑定执行顺序所导致的数据更新不及时问题 在实际的vue项目开发中，可能会遇到v-model指令双向绑定的数据与标签绑定方法所回调的数据不同步的问题。这是由于v-model与标签绑定方法执行顺序之差所导致的。解决的办法是利用绑定方法先执行的方式来手动模拟v-model，进而实现数据的更新。 问题复现 观察如下的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta char.
Uni-App + Vue onLoad与onLaunch执行顺序问题完整解决方案 – 3种实用方法详解
最新发布
前端开发-前端技术分享
09-04 1815
深入解析Vue应用中onLoad在onLaunch未完成时执行的常见问题，提供Promise状态管理、事件总线、状态机模式三种解决方案，适用于小程序和Vue项目开发，解决全局数据未准备好的痛点。
vue的created函数中，方法的执行顺序
qq_42314022的博客
03-20 2万+
vue的created钩子函数中，方法的执行顺序 情景：vue框架中通常在created钩子函数里执行访问数据库的方法，然后返回数据给前端，前端data中定义全局变量接收数据 但是如果你在created中执行了好几个访问数据库的函数，如果对他们的执行顺序是有要求的，那么哪个会先返回，哪个会后返回呢 并不是谁在前谁就先返回，如果你这样想，并且在后执行的函数中对先执行的函数返回的数据进行操作，经常会报...
vue 方法顺序执行
nongcunqq的博客
05-30 1117
虽然Vue中的方法是顺序执行的，但是如果某个方法执行时间很长（比如访问后台数据接口），那后面的方法不会等这个方法执行完就会执行。这说明，同一个方法内可以顺序执行，但是多个方法之间并不能严格控制顺序执行。
vue在一个方法执行完后执行另一个方法
热门推荐
东黧的博客
03-27 8万+
vue在一个方法执行完后执行另一个方法 用Promise来实现 function2(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) } function3(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) } // 调用 function1(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值