首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue2:当我从response中分配属性时,为什么会收到无限的$http.get请求?

Vue2是一种流行的前端开发框架,用于构建用户界面。当从response中分配属性时,如果没有正确处理,可能会导致无限的$http.get请求。

这种情况通常是由于在Vue组件的data属性中定义了一个对象,并且在组件的created或mounted生命周期钩子函数中使用$http.get请求来获取数据。然后,将获取的数据分配给data对象的属性。但是,由于Vue的响应式系统的特性,当分配属性时,Vue会自动追踪这些属性的变化,并尝试重新渲染组件。

因此,当分配属性时,Vue会检测到数据的变化,并尝试重新获取数据,从而导致无限的$http.get请求。

为了解决这个问题,可以采取以下几种方法:

  1. 使用Vue的生命周期钩子函数beforeMount或mounted来发送$http.get请求,并将获取的数据分配给组件的data属性之前。这样,Vue在渲染组件之前就已经获取了数据,避免了无限的请求。
  2. 在data属性中定义一个初始值,而不是一个空对象。这样,Vue在组件初始化时就会将初始值作为响应式数据进行追踪,而不会尝试重新获取数据。
  3. 使用Vue的计算属性来处理获取数据和分配属性的逻辑。计算属性可以缓存计算结果,并在依赖的数据发生变化时自动更新。通过将获取数据和分配属性的逻辑放在计算属性中,可以避免无限的请求。

总结起来,当从response中分配属性时,导致无限的$http.get请求是由于Vue的响应式系统的特性所致。为了解决这个问题,可以在合适的生命周期钩子函数中获取数据并分配属性,或者使用计算属性来处理逻辑。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Go 语言网络编程系列(三)—— HTTP 编程篇:客户端如何发起请求

底层调用 其实通过 http.Get 发起请求,默认调用是上述 http.Client 缺省对象上 Get 方法: func Get(url string) (resp *Response, err...= &Client{} 它是 net/http 包公开属性当我们在 http 上调用 Get、Post、PostForm、Head 方法,最终调用都是该对象上对应方法。...在多数情况下,http.Get、http.Post 和 http.PostForm 就可以满足需求,但是如果我们发起 HTTP 请求需要设置更多自定义请求头信息,比如: 设置自定义 User-Agent...http.NewRequest 方法返回第一个值就是请求对象实例 req,该实例所属类是 http.Request,你可以调用该类上公开方法和属性请求对象进行自定义配置,比如请求方法、URL、请求头等...Tips:想要阅读全部 Go 语言入门到精通教程,请点击左下角“阅读原文”链接。 https://xueyuanjun.com/post/20989

2.7K20
  • Node入门教程(12)第十章:NodeHTTP模块

    response请求响应被接收到时触发。 该事件只触发一次。如果没有添加 'response' 事件处理函数,则响应会被整个丢弃。...在数据被读取完之前消耗内存,可能造成 'process out of memory' 错误。 socket 当 socket 被分配到请求后触发。...get请求另外一个办法 http模块还提供了http.get(options,callback),用来更简单处理GET方式请求,它是http.request()简化版本,唯一区别在于http.get...1.close:用户当前请求结束,该事件被触发,不同于end,如果用户强制终止了传输,也触发close ServerRequest属性 名称 含义 ccomplete 客户端请求是否已经发送完成...恶意POST请求大大消耗服务器资源。所以Nodejs是不会解析请求体,当你需要时候,需要手动来做。

    1K60

    「快速上手Flutter开发系列教程」之线程和异步UI

    // 流第一个元素被收到后监听会关闭,所以需要新打开一个ReceivePort以接收传入消息 ReceivePort response = ReceivePort(); //...入口函数,该函数会在新Isolate中调用,Isolate.spawnmessage参数作为调用它唯一参数 static dataLoader(SendPort sendPort) async...入口函数,该函数会在新Isolate中调用,Isolate.spawnmessage参数作为调用它唯一参数 static dataLoader(SendPort sendPort) async...(response.body)); } } } 关于Flutter更多异步编程知识,可以学习《Flutter入门到进阶-实战携程网App》。...否则,当数据网络请求中返回,渲染 ListView: import 'dart:convert'; import 'package:flutter/material.dart'; import '

    2.2K20

    bigpipe性能优化

    本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 背景 当前网速越来越快,但是随着网页内容越来越丰富,其实我们打开网页速度并未得到什么提升,相反,过多内容导致网页打开速度变慢...,当我们都应用了这些技术,发现网站性能依然不那么乐观时候,会考虑到一些非常规、适用于某些特定场景优化技术 另一种思路 Facebook研究科学家changhao jiang提出了一个优化方案,名字叫做...传统一个打开页面的步骤 浏览器发送HTTP请求 服务器接收到HTTP请求,解析请求存储层拉取数据,拼接HTML,发回一个HTTP响应 这个请求通过网络传输到浏览器 浏览器解析接收到数据,构造DOM...>"); } response.write(""); var down = 6; for (i = 0; i < 6; i++) { http.get...(8080); 模拟请求代码: http.createServer(function(request, response) { // Some delay upto upto 2 seconds

    1.2K100

    Flutter 构建完整应用手册-联网 顶

    路线 使用http包发出网络请求 将响应转换为自定义Dart对象 用Flutter获取并显示数据 1.使用http包发出网络请求 http包提供了互联网获取数据最简单方法。...; } http.get方法返回一个包含ResponseFuture。...Future是与异步操作一起工作核心Dart类。 它用于表示未来某个时间可能会出现潜在价值或错误。 http.Response类包含成功http调用收到数据。...为了让我们生活更轻松,我们可以将http.Response转换为我们自己Dart对象。 创建一个Post类 首先,我们需要创建一个Post类,其中包含来自我们网络请求数据。...StreamBuilder部件将连接到Stream,并在每次接收到事件使用给定builder函数请求Flutter重建!

    2.6K20

    bigpipe性能优化

    本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 背景 当前网速越来越快,但是随着网页内容越来越丰富,其实我们打开网页速度并未得到什么提升,相反,过多内容导致网页打开速度变慢...,当我们都应用了这些技术,发现网站性能依然不那么乐观时候,会考虑到一些非常规、适用于某些特定场景优化技术 另一种思路 Facebook研究科学家changhao jiang提出了一个优化方案,名字叫做...传统一个打开页面的步骤 浏览器发送HTTP请求 服务器接收到HTTP请求,解析请求存储层拉取数据,拼接HTML,发回一个HTTP响应 这个请求通过网络传输到浏览器 浏览器解析接收到数据,构造DOM...>"); } response.write(""); var down = 6; for (i = 0; i < 6; i++) { http.get...(8080); 模拟请求代码: http.createServer(function(request, response) { // Some delay upto upto 2 seconds

    47920

    vue.cli项目封装全局axios,封装请求,封装公共api和调用请求全过程

    (response => { //接收到响应数据并成功后一些共有的处理,关闭loading等 return response }, error => { /**...*** 接收到异常响应处理开始 *****/ if (error && error.response) { // 1.公共错误处理 // 2.根据响应码具体处理...,非必须,也是分情况,data/headers /params 这种本身参数都有多种,和后台沟通,需要什么就什么!...config.data = JSON.stringify(config.data);为什么不用qs.stringify,因为我后台想要只是json类型传参,而qs转换转换成为键值对拼接字符串形式...:form表单数据被编码为key/value格式发送到服务器(表单默认提交数据格式),你可以根据实际情况去配置自己需要; 如果最终完成后,报错连接服务器失败,那是正常,因为示例配置服务器地址

    3.2K10

    实用VUE系列——快速使用 vue ,就要鄙视他,理解他,成为他

    而我们正确做法,不让这个响应式地址丢失 obj = Object.assign(obj,{a:1}) 理解了这个问题,我们就能理解es6解构赋值 为什么破坏响应式,其实本质上异曲同工 好,接下来,...当组件使用混入对象,所有混入对象选项将被“混合”进入该组件本身选项。...要理解这个问题,我们就需要追本溯源,框架为什么叫做框架说起 所谓框架,其实就是一套开发规范,我们按照规范写代码,框架将规范代码转换执行组成我们界面,如此而已 其实我们也可以,自己用原生写,只是他很浪费时间...调用是,组件 Dom 已经更新,所以可以执行依赖于 Dom 操作,然而在大多数情况下,应该避免在此期间更改状态,因为这可能导致更新无限循环,该钩子函数在服务器端渲染期间不被调用。...以上代码可以看出,onUpdated 方法 在初始化之后,应该是没有被推入微任务队列, 而是保存在了某个地方, 不然,初始化之后,应该是打印三个值,而现今只有两个, 而当我点击之后发现, onUpdated

    9510

    基于 Vue3 和 TS4 项目大量实践后总结

    return这个对象,一定程度上,代表了之前vue2data属性。...这里我需要明确是,Vue3是完全兼容Vue2这种options Api写法,但是理念上来说,更加推荐setup方式,来写我们组件。...原因如下:Vue3存在,本身是为了解决Vue2问题Vue2问题就是在于,聚合性不足,导致代码越来越臃肿!setup方式,能够让data、方法逻辑、依赖关系等聚合在一块,更方便维护。...components属性,也就是一个组件子组件,这个配置在Vue2和3差异不大,Vue2怎么用,Vue3依然那么用。 1、ref 和 reactive区别?...,我们一般使用TS这么定义一个数据请求,数据请求req类型,数据请求res类型。

    59421

    【总结】1166- 基于 Vue3 + TS 项目大量实践后思考

    return这个对象,一定程度上,代表了之前vue2data属性。...这里我需要明确是,Vue3是完全兼容Vue2这种options Api写法,但是理念上来说,更加推荐setup方式,来写我们组件。...原因如下:Vue3存在,本身是为了解决Vue2问题Vue2问题就是在于,聚合性不足,导致代码越来越臃肿!setup方式,能够让data、方法逻辑、依赖关系等聚合在一块,更方便维护。...components属性,也就是一个组件子组件,这个配置在Vue2和3差异不大,Vue2怎么用,Vue3依然那么用。 1、ref 和 reactive区别?...,我们一般使用TS这么定义一个数据请求,数据请求req类型,数据请求res类型。

    75230

    Nacos7# Distro协议增量同步

    当节点收到ClientChangedEvent事件向集群中其他节点发送更新Client信息请求,其他节点收到后更新缓存 当节点收到ClientVerifyFailedEvent事件,向该Event...指定目标节点发起新增该Event指定Client信息请求,目标节点收到后更新到自己缓存中 当节点收到ClientDisconnectEvent事件向集群中其他节点发送删除Client信息请求,...Response请求节点收到失败Response后会发布ClientVerifyFailedEvent事件 二、增量数据同步 将代码翻到DistroClientDataProcessor类中,该类继承了...Client信息,ConnectionBasedClient属性isNative为false表示该连接其他节点同步过来;true表示该连接客户端直接连接。...(具体为本节点负责Client信息),其他节点接受到校验请求,如果缓存中存在该client表示校验成功,同时更新保鲜时间;否则校验失败,回调返回失败Response请求节点收到失败Response后会发布

    1.2K31

    【JS】625- Axios 如何缓存请求数据?

    那么为什么要缓存请求数据呢?这是因为在缓存未失效,我们可以直接使用已缓存数据,而不需发起请求服务端获取数据,这样不仅可以减少 HTTP 请求而且还能减少等待时间从而提高用户体验。...一、如何设计缓存 在计算中,缓存是一个高速数据存储层,其中存储了数据子集,且通常是 短暂性 存储,这样日后再次请求该数据,速度要比访问数据主存储位置快。...// 使用缓存 async function requestWithCache() { const response = await http.get("/todos/1", { cache: true...http.get("/todos/1", { cache: false }); console.dir(response); } 其实 cache 属性除了支持布尔值之外,我们可以配置实现 Cache...() {/*...*/}}; async function requestForceUpdate() { const response = await http.get("/todos

    4K30

    Go语言核心36讲(Go语言实战与应用二十五)--学习笔记

    如果我们只是访问基于 HTTP 协议网络服务的话,那么使用net/http代码包中程序实体来做,显然更加便捷。 其中,最便捷是使用http.Get函数。...:\n%s\n", line1) http.Get函数返回两个结果值。...ResponseHeaderTimeout:含义是,客户端把请求完全递交给操作系统到操作系统那里接收到响应报文头最大时长。DefaultTransport并没有设定该字段值。...如此一来,每当一个 HTTP 请求被递交,就都会产生一个新网络连接。这样做明显地加重网络服务以及客户端负载,并会让每个 HTTP 事务都耗费更多时间。...http.Server类型ListenAndServe方法功能是:监听一个基于 TCP 协议网络地址,并对接收到 HTTP 请求进行处理。

    31001

    Python-Requests库进阶用法——timeouts, retries, hooks

    幸运是,request库提供了一个“hooks”(钩子)接口,可以附加对请求过程某些部分回调,确保同一session对象发出每个请求都会被检查。...# 创建自定义请求对象,修改全局模块抛出错误异常 http = requests.Session() assert_status_hook = lambda response, *args, **kwargs...如果你python程序是同步,忘记设置请求默认timeout可能导致你请求或者有应用程序挂起。 timeout设定同样有两种方法: 1、每次都在get语句中指定timeout值。...= http.get("https://api.twilio.com/") # 通常为特定请求重写超时时间 response = http.get("https://api.twilio.com/...模仿浏览器行为 有些网页根据不同浏览器发送不同HTML代码(为了反爬或适配设备),可以在发送请求指定User-Agent将自己伪装成特定浏览器。

    3K20
    领券