vue同步（vue同步调用方法）

本篇文章给大家谈谈vue同步，以及vue同步调用方法对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、前端开发vue-resource怎样设置为同步请求
• 2、Vue 数据同步获取
• 3、vue axios中怎么实现同步请求功能
• 4、vue勾子函数是同步还是异步
• 5、关于Vue中的属性值无法与视图同步的问题

前端开发vue-resource怎样设置为同步请求

这个问题也是困扰我一个上午，查了很多方法想让vue支持同步请求，但都失败了。于是我打算使用原生js的请求方法，来让页面实现同步请求的功能。毕竟原生的js 在哪个框架下都是可以使用核槐激的。附上代码：// js发送同步请求

let userId = this.user.userId

      let sectionId = this.currentSection

      let request = new XMLHttpRequest()

      request.open('POST', `/${prefixApi}learning-progress?userId=${userId}sectionId=${sectionId}`, false) 明搏// 第三个参数 false 代表设置同步请求

      request.setRequestHeader('Accept', 'application/json');

      request.setRequestHeader('Content-Type', 'application/json');

      request.send(JSON.stringify({learningCompleted: this.learningCompleted, playbackTime: this.currentTime}))

      if (request.status === 200) {

        console.log('success')

   改袜   } else {

        this.NETWORK_MODAL.show = true

      }

Vue 数据同步获取

如果我们的业务逻辑需要请求多个数据，并且后一个请求依赖于前一个请求的结果，这时候我们更不能保证数据获取顺序，因此我们需要将异步请喊凯求改成同步，以保证业务逻辑的正确性。

async 与 await

异步的，念森其放在我们所定义的 function 名前，如：

显然 异步执行的方法，能够通过这个关键字，等待请求结果，实现将异步执行的方法变成同步的。

好了，问题解决，只要在请求时加上await就可以了！

结果输出：

是的，结果确实是正确的，但还有一个规则还没有讲，那郑高唤就是 async 与 await 必须同时出现 所以我们的代码实际是这样的：

[img]

vue axios中怎么实现同步请求功能

axios暂时是无法实现同步请求功能的，笑弯穗因为呢axios是个基于promise对象的异碰卜步请求库。promise本身就是一个传递异步操作的对象。。如果你想实现同步的功能，建议监听数值的变化 来更新data里面的数据。。希望答案能帮到闹猜你。。或者你用jq的ajax请求。其实也可以的，只是vue官方推荐用axios，毕竟vue是基于es5特性的 不支持ie8以下的。。希望答案能帮助到你

vue勾子函数是同步还是异步

Vue勾子函数可以是同步也可以是局旅异步，具体取决于具体的业务场景。一般来说，如果埋运涉及弯腊梁到I/O操作，比如读取数据库、文件或者处理大量数据，则建议使用异步方式；反之，如果涉及的仅仅是一些简单的赋值操作，则可以考虑使用同步方式。

关于Vue中的属性值无法与视图同步的问题

在开发过程中，我们时常会答宏遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

这是为什么呢？

让我们来看官方文档是怎么写的:

受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue

转换它，这样才能让它是响应的。 例如：

我们首先在浏览器中查看神举埋 console.log(this.obj); 这句话的打印结果:

可以看出ValueA属性是有get 和 set方法的，而新增的ValueB属性是没有的。

让我们来触发三次增加ValueA的函数，网页打印结果如下:

同时页面上的显示情况:

由此看出，更新ValueA时，数据与视图会同步更新，而更新ValueB的时候数据会被更新而视图却游蚂不会被更新

解决方案 ：

官方定义：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(data.obj, 'key', value)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.obj,'e',02)

上述实例解决如下：

再分别触发增加ValueA和ValueB的函数，视图与数据都进行了更新:

关于vue同步和vue同步调用方法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。