Vue初始化页面的时候,请求被重复调用(仅供个人学习记录)

最新推荐文章于 2025-01-25 10:20:02 发布

原创最新推荐文章于 2025-01-25 10:20:02 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文揭示了在Vue或React应用中，初次页面加载时网络请求被调用两次的常见问题，原因在于watch的immediate属性设置。通过调整为false，解决了刷新页面导致的多余请求，提供了解决方案。

在实际开发中,遇到了在初始化页面的时候,在network中,请求被调用了两次

本来以为是created里面出了问题,却没有注意watch中的一个小细节,在watch中写了一个

immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，当然此时页面上的数据我们还没来得及让其发生变化,也就是说问题就出在了这里,把immediate改为false,就OK了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飒飒飒丢～～～

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue监听器执行两次的原因及解决方法

TechInk的博客

09-20

3212

Vue.js 是一款流行的JavaScript框架，它采用了数据驱动的方式来构建用户界面。在Vue中，我们可以使用监听器（watcher）来监听数据的变化并执行相应的操作。然而，有时候我们会发现监听器会执行两次，这可能会导致一些问题。本文将详细解释为什么Vue监听器会执行两次，并提供解决方法。

vue页面Form 表单卡顿的问题，如何解决？

**My Coding Family**

01-22

1214

解决表单卡顿的问题，首先需要定位瓶颈，可能是由于多个因素共同作用导致的。减少不必要的重渲染，避免过多的双向绑定和复杂的 DOM 操作。事件防抖和节流，尤其是对于快速输入和键盘事件。列表虚拟化，避免渲染大量数据。合理的组件拆分和懒加载，避免页面加载时阻塞。性能分析工具，查找具体的性能瓶颈。这些优化措施可以逐步实施，结合性能分析工具进行调试，找出最有效的优化方法。希望如上措施及解决方案能够帮到有需要的你。

参与评论您还未登录，请先登录后发表或查看评论

在vue中使用axios作交互时，为什么会调用两次接口

04-20

原来在 CORS-跨域资源共享中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。览器先询问服务器，当前网页的域名是否在服务器的许可名单之中，及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。当你的Content-Type设置为“application/json;charset=utf-8”并自定义请求头可能就会导致这种情况。但并不会产生什么影响。

项目中遇到的问题4：请求数据，并用watch监听，刷新页面会执行两遍接口

小羊的博客

12-17

3225

问题描述：通过项目ID向后端请求数据，数据请求成功后会向数组中push内容，通过watch监听项目ID变化后重新执行这个方法，但接口会执行两遍，数组中也会被push两次，在请求中清空了数组但依然会push两次内容，所以页面显示也会出错原代码如下： // data中定义了一个空数组studentData，请求到数据后向这个数组中push数据 data() { return { ...

vue中使用axios请求接口，请求会发送两次

07-23

1万+

vue中使用axios请求接口，请求会发送两次的问题浏览器分为简单请求以及非简单请求：解决方案：跨域请求需要先发一次Option预请求，OPTIONS是检验是否允许跨域的，如果不希望OPTIONS请求，直接让后端遇到option直接返回就可以了，前端可不做处理。...

vue项目created()被调用多次的坑

BHSZZY的博客

12-05

9151

最近碰到一个奇怪的生产问题：正常情况下、前端页面会请求一次后台、然后后台返回信息（或）、前端展示；后台用aop+redis写了一个防止重复调用的方法，如果5s内同一个用户重复调用同一个接口，就返回，前端就会展示这个。但是，某几个页面，前端总是会重复调用后端2次，导致用户只能看到，无法确认本次操作是成功还是失败，严重影响了用户的正常使用。（虽然是处理成功，但是显示不出来…）一开始还怀疑是不是后端的问题，排查了半天，终于锁定了，是前端的问题，vue项目中的方法被调用了。继续排查，发现从正常页面跳转到这个问题

ssm440基于SSM的在线学习系统的设计与实现+vue.rar

12-14

然而，需要强调的是，该项目仅供学习交流之用，不得用于商业目的，以避免侵犯原作者的知识产权和违反相关法律法规。 “ssm440基于SSM的在线学习系统的设计与实现+vue”项目集成了现代Web开发的多种技术，为构建高效...

springboot+vue 集成keycloak sso到阿里云，如何实现？

**My Coding Family**

01-25

997

通过上述步骤，用户在登录Spring Boot应用后，可以无缝跳转至阿里云完成SSO登录。这种方式不仅提升了用户体验，还符合现代化安全要求。希望如上措施及解决方案能够帮到有需要的你。PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。

但是不需要每次都调用开关接口，只需要初始化时调用一次

最新发布

11-26

此方案确保了配置仅在初始化时加载一次，并通过Promise机制处理异步请求，适用于Vue、React等现代前端框架[^2][^3]。模块化的设计也符合JavaScript的最佳实践[^1]。 ## 相关问题 1. **如何在Vue应用启动时预加载...

【学习笔记】前端（I）—— Vue2（Ⅰ）

Eddie_hyh的博客

04-30

1231

前端第一部分：Vue（Ⅰ）

接口错误拦截

Pandora_417的博客

04-07

511

统一报错未登录统一拦截请求值、返回值统一处理顺带记个东西： axios的response和request 不大懂 https://www.npmjs.com/package/axios / Add a request interceptor axios.interceptors.request.use(function (config) { // Do something bef...

Vue中接口为什么会被调用多次？

CyberFlare的博客

09-24

1223

综上所述，Vue中接口被调用多次的问题可能是由于组件初始化过程中的多次调用、依赖数据变化、监听器和事件绑定引起的。针对这些情况，我们可以根据具体的场景选择适当的解决方法，以避免接口被多次调用，提高应用性能。如果在模板或计算属性中使用了接口返回的数据，而该数据发生变化时，可能会触发接口的多次调用。特别是当事件绑定在循环中时，每次循环都会为事件绑定一个新的回调函数，从而导致多次调用。这是因为组件的初始化过程中，会进行虚拟DOM的渲染和更新，而每次更新都可能引发接口的调用。在Vue中，可以通过。

请求一次服务器会显示请求了两次,关于vue中用axios出现两次请求，一次是options请求的问题...

weixin_35693014的博客

08-03

2457

要处理这个问题先要了解cors跨域资源共享,可以到阮大神的微博了解一下。http://www.ruanyifeng.com/blog/2016/04/cors.html参考：https://segmentfault.com/a/1190000016040998注：这个问题与用不用axios无关，只是axios在我们项目上使用的比较多，所以大家才以为是axios出现的问题。前世今生：产生原因：跨域请...

Vue首次加载Created正常显示数据，再次加载数据不对等

m0_48971013的博客

02-28

884

Vue首次加载Created正常显示数据，再次加载数据不对等说下{自己}的理解：因为created存在缓存这个东西，当你的$route相同时为了提高效率它会加载缓存中的数据例如：点击查看同一个详情页，首次ID=1001,再次ID=1002，这个时候第二次加载的数据其实是ID=1001的数据解决方法：使route每次加载都不一样在App.vue中的增加 :key="key" <keep-alive> <router-view :key="key"></rou

vue3,如果遇到重复的多次请求需要对请求进行优化

yuyuyuyuyuyyuuyu的博客

06-19

640

将公共的请求放在父组件里发送。

vue+axios每次都重复请求两次

qq_38799387的博客

07-22

8062

axios发送两次请求原因及解决方法使用axios每次都会产生两次网络请求，第一次是Request Method为OPTIONS的请求，询问服务器是否有访问权限，如果有，则再次请求数据。所以首先我们要知道，这不是bug，而是由于跨域通讯造成的，是符合w3c标准的。 CORS两种请求　　浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时满足以下两大条件，就属于简单请求。　　（1) 请求方法是以下三种方法之一

vue 中接口多次重复调用