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

为什么当我通过一个函数调用axios时,它没有更新?

当你通过一个函数调用axios时,它没有更新的原因可能有以下几种:

  1. 异步请求问题:axios是一个基于Promise的HTTP客户端,它默认是异步执行的。如果你在函数中调用axios发送请求,而没有等待请求返回再执行后续代码,那么可能会导致函数没有更新。你可以使用async/await或者.then()方法来确保在请求返回后再执行后续代码。
  2. 请求错误或失败:如果你的axios请求出现错误或者失败,那么可能会导致函数没有更新。你可以通过在请求的.then()方法中添加错误处理逻辑来捕获并处理请求错误。
  3. 缓存问题:如果你的axios请求返回的数据被缓存了,那么可能会导致函数没有更新。你可以通过在请求的配置中设置cache:false来禁用缓存。
  4. 函数调用位置问题:如果你的函数调用axios的代码位置不正确,可能会导致函数没有更新。你可以确保函数调用axios的代码在正确的位置。

综上所述,当你通过一个函数调用axios时,它没有更新可能是由于异步请求问题、请求错误或失败、缓存问题或函数调用位置问题导致的。你可以根据具体情况进行排查和处理。

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

相关·内容

React Hooks踩坑分享

唯有在依赖数组中传入了num,React才会知道你依赖了num,在num的值改变,需要更新函数。...可以把这个函数移动到你的组件之外。这样就不用其出现在依赖列表中了。 如果其不依赖state、props。但是依赖内部变量,可以将其在effect之外调用它,并让effect依赖于的返回值。...每次调用fetchData函数更新list,list更新后fetchData函数就会被更新。fetchData更新后useEffect会被调用,useEffect中又调用了fetchData函数。...fetchData被调用导致list更新......通过dispatch了一个action来描述发生了什么。这使得我们的fetchData函数和list状态解耦。我们的fetchData函数不再关心怎么更新状态,只负责告诉我们发生了什么。

2.9K30

如何修复Vue中的 “this is undefined” 问题

一个可能的原因是混淆了常规函数和箭头函数的用法,如果你遇到这个问题,我猜你用的是箭头函数。如果用常规函数替换箭头函数,它可能会为你修复这个问题。 我们再深入一点,试着理解为什么会这样。...箭头函数 箭头函数可以更短,更快的编写,因此最近获得了广泛的欢迎。但是,它们在对象上定义方法没有太大的不同,就像我们在编写Vue组件所做的那样。...匿名函数 当我们只需要创建一个函数而不需要从其他任何地方调用,匿名函数非常有用。...由于箭头函数使用外部作用域作为它们自己的作用域,因此箭头函数也将this设置为我们的Vue组件。 这允许我们通过this访问 Vue 组件并更新dataFromServer。...现在,当我们在Vue组件上调用this.methodToDebounce(),我们将调用debounced版本。

4.8K20

【React】1935- 来看看 SWR 如何用 React Hook 实现优雅请求

useData 这个自定义 hook 用于请求 /oiloil 这个接口的数据,当我们在组件中使用 hook 的时候就直接发送了请求,如果我们后面需要重复请求可以直接调用 reload 方法,而且通过...当我们加载表格,我们会发送请求以获取表格需要的数据,在请求的过程中我们可能会展示一个加载动画或者骨架屏。...数据突变(mutate) 当我调用 useSWR 这个 hook ,它会自动为我们发送请求,例如我们刚刚进入页面时调用就会去获取渲染页面的初始数据,那如果我们知道当前页面的数据已经变更了要如何重新请求呢...revalidate:一旦完成异步更新,缓存是否重新请求。 populateCache:远程更新的结果是否写入缓存,或者是一个以新结果和当前结果作为参数并返回更新结果的函数。...例如当我们 目前操作的用户权限突然被调低 了,在获取数据后端响应了状态码 403 ,我们想要在 axios 的响应拦截中配置一个:如果遇到状态码为 403 的响应数据就重新获取一下用户的权限以重新渲染页面

53210

(自制翻译)如何解决在vue中this报错undefined

我猜你肯定用了一个箭头函数。如果你把这个箭头函数替换成普通函数,也许能解决上面你遇到的问题。 接下来让我们深入原理来了解为什么会产生这个问题。...箭头函数 箭头函数书写起来更简略更快捷,并能为我们获得更多人气。但是变得不那么好了当我们在一个对象里定义方法,比如当我们编写vue组件。...匿名函数 当你仅仅是想快速构建一个函数且并不需要调用,使用匿名函数是非常适合的。这类函数之所以被称为匿名函数,是因为它们不需要赋予函数名和参数值。...这样就允许我们通过this去引用vue组件并更新dataFromServer 使用Lodash库或Underscore库 (没用过这两个库,不翻译了) 什么是lexical scoping(静态作用域)...但也有办法通过重写改变这种行为。 绑定另一个函数的作用域 const boundFunction = unboundFunction.bind(this);

4K40

前端vue面试题2020及答案_c++ 面试题

]): 创建一个新的 axios(没有下面的功能) axios.Cancel(): 用于创建取消请求的错误对象 axios.CancelToken(): 用于创建取消请求的 token 对象 axios.isCancel...,不能使用计算属性,watch 不能通过$emit对外暴露事件,调用事件只能通过context.listeners.click的方式调用外部传入的事件 因为函数式组件是没有实例化的,所以在外部通过ref...定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时,就会形成闭包。...new运算符调用, 如果构造函数没有参数可以省略小括号, 比如new Object; 普通函数调用不需要new 运算符, 而且必须有小括号。...通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用

4.2K10

使用vue技术栈,作为一个前端架构师是必须掌握这些知识点的

:是否可以遍历该key writable:是否可以修改该key get: 获取该key值时调用函数 set: 设置该key值时调用函数 我们通过一个例子来了解一下这些属性: let x = {}...这个就更强大了,类似于在获取对象值和设置对象值加了一个代理,在这个代理函数中可以做的东西你就可以想象了,比如设置值再通知一下View视图做更新。...Vue源码正是通过这种方式实现了访问属性收集依赖,设置属性源码有一句dep.notify,里面便是通知视图更新的相关操作。...这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 调用函数。”...当我们在之后介绍到 Modules ,你就知道 context 对象为什么不是 store 实例本身了。

4.1K52

Fetch还是Axios——哪个更适合HTTP请求?

前端开发最重要的部分之一是通过发出 HTTP 请求与后端进行通信,我们有几种方法可以异步地在 Javascript 中进行 API 调用。...当我们创建配置对象,我们可以定义一堆属性,最常见的是: baseUrl params headers auth responseType 作为响应,axios 返回一个 promise,该 promise...在 axios 中,实现一个进度指示器也是可能的,而且更容易,因为存在一个现成的模块,可以安装和实现,叫做 Axios Progress Bar。...通过比较可以看出,对于有大量 HTTP 请求,需要良好的错误处理或 HTTP 拦截的应用,Axios一个更好的解决方案。...在小型项目的情况下,只需要几个简单的 API 调用,Fetch 也是一个不错的解决方案。 在选择项目的最佳解决方案,还要注意一个因素,这是非常重要的。

4.6K20

【React】945- 你真的用对 useEffect 了吗?

通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它。...请看下面的例子: App组件显示了一个项目列表,状态和状态更新函数来自与useState这个hooks,通过调用useState,来创建App组件的内部状态。...再看这个例子: 业务场景:需要在页面一开始得到一个接口的返回值,取调用一个接口。...我们可以看到useEffect的依赖数据中并没有添加loading,这是因为,我们不需要再loading变更重新调用useEffect。...运行所有生命周期函数和 ref 回调函数。生命周期函数会在一个独立的通道中运行,所以整个组件树中所有的替换、更新、删除都会被调用。这个过程还会触发任何特定于渲染器的初始 effect hook。

9.6K20

2021年Vue最常见的面试题以及答案(面试必过)

Proxy 与 Object.defineProperty 优劣对比 vue中组件的data为什么一个函数?...为什么 Vuex 的 mutation 中不能做异步操作? axios 是什么,其特点和常用语法 对SSR有了解吗,主要解决什么问题? Vue要做权限管理该怎么做?控制到按钮级别的权限怎么做?...computed的方法不会执行,但methods里的方法会执行 3.computed是属性调用,而methods是函数调用 虚拟DOM中key的作用 简单的说:key是虚拟DOM对象的标识,在更新显示...为对象添加一个新的响应式数据:调用 defineReactive 方法为对象增加响应式数据,然后执行 dep.notify 进行依赖通知,更新视图 为数组添加一个新的响应式数据:通过 splice 方法实现...([config]): 创建一个新的 axios(没有下面的功能) axios.Cancel(): 用于创建取消请求的错误对象 axios.CancelToken(): 用于创建取消请求的 token

3.7K20

一篇带你从小白到入门的vue教程

vue中的data为什么(必须)是一个函数,单页面应用就无所谓了,但是脚手架只有一个html 因为vue是组件化开发,下面来简单说明一下。...vue中的data为什么(必须)是一个函数 往深处说就要扯到 js 的栈 堆 池了,这里我只简单说明一下 1、vue中组件是用来复用的,为了防止data复用,将其定义为函数。...3、当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据...4、当我们组件的data单纯的写成对象形式,这些实例用的是同一个构造函数,由于JavaScript的特性所导致,所有的组件实例共用了一个data,就会造成一个变了全都会变的结果。...采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 vuex的工作流程 在vue的组件中通过dispatch来调用actions中的方法,在actions中通过commit

7.7K21

为什么要有refreshToken

当你第一次接触的时候,你有没有一个这样子的疑惑,为什么需要refreshToken这个东西,而不是服务器端给一个期限较长甚至永久性的accessToken呢?...抱着这个疑惑我在网上搜寻了一番,其实这个accessToken的使用期限有点像我们生活中的入住酒店,当我们在入住酒店,会出示我们的身份证明来登记获取房卡,此时房卡相当于accessToken,可以访问对应的房间...如果accessToken设置一个短暂的有效期2小,攻击者能使用被盗取的accessToken的时间最多也就2个小时,除非再通过refreshToken刷新accessToken才能正常访问。...,服务器会返回401的状态码来告诉用户此token过期了,此时就需要用到登录返回的refreshToken调用刷新Token的接口(Refresh)来更新下新的token再发送请求即可。...话不多说,先上代码工具axios作为最热门的http请求库之一,我们本篇文章就借助的错误响应拦截器来实现token无感刷新功能。

1.1K20

React学习笔记(三)—— 组件高级

下面了的代码,我们用到了数组函数的map方法来实现数组的每一个值变成的2倍,同时返回一个新数组,最后打印出了这个数组: const numbers = [1,2,3,4,5]; const doubled...1.4、Extracting Components with Keys(当我们提取一个组件到另一个组件的时候,需要注意怎么管理key) key属性只有在数组数据环境中才有意义,其它地方是没有意义的。...例如,当我们实现一个ListItem组件的时候,这个组件封装了一个li元素,那么我们不应该在li元素上直接设置key属性,因为没有意义,key是用来跟踪数组才有意义,于是我们在NumberList组件使用到...在React中,对select的处理方式有所不同,通过在select上定义 value属性来决定哪一个option元素处于选中状态。...要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以 使用 ref 来从 DOM 节点中获取表单数据。

8.2K20

三年经验前端vue面试记录

封装,就可以让我们可以领略到的魅力封装 axios 没有一个绝对的标准,只要你的封装可以满足你的项目需求,并且用起来方便,那就是一个好的封装方案参考:前端vue面试题详细解答v-on可以监听多个方法吗...函数式组件优势和原理函数组件的特点函数式组件需要在声明组件是指定 functional:true不需要实例化,所以没有this,this通过render函数的第二个参数context来代替没有生命周期钩子函数...,不能使用计算属性,watch不能通过$emit 对外暴露事件,调用事件只能通过context.listeners.click的方式调用外部传入的事件因为函数式组件是没有实例化的,所以在外部通过ref去引用组件...(可以通过inheritAttrs属性禁止)优点由于函数式组件不需要实例化,无状态,没有生命周期,所以渲染性能要好于普通组件函数式组件结构比较简单,代码结构更清晰使用场景:一个简单的展示组件,作为容器组件使用...为了解决该问题,pinia提供的$patch方法还可以接收一个回调函数的用法有点像我们的数组循环回调函数了。store.

2K30

那些年错过的React组件单元测试(上)

通过一个测试用例加 1,number的值为 1,当第二个用例减 1 的时候,结果应该是 0。但是这样两个用例间相互干扰不好,可以通过 Jest 的钩子函数来解决。...done 关键字 当我们的test函数中出现了异步回调函数,可以给test函数传入一个done参数,它是一个函数类型的参数。...如果test函数传入了done,jest就会等到done被调用才会结束当前的test case,如果done没有调用,则该test自动不通过测试。...Mock 介绍jest中的mock之前,我们先来思考一个问题:为什么要使用mock函数? 在项目中,一个模块的方法内常常会去调用另外一个模块的方法。...实际上,jest.spyOn()是jest.fn()的语法糖,创建了一个和被spy的函数具有相同内部代码的mock函数。 Snapshot 快照测试 所谓snapshot,即快照也。

4.9K20

扶我起来,前端还没倒下,我不能睡

当我们深入了解每一个阶段之后,才会在合适的阶段添加合适的功能。那么如何在合适的阶段完成所需需求呢?那就用到了生命周期钩子。...1.5 beforeUpdate 数据发生变化前调用 1.6 updated 数据发生变化后调用 1.7 beforeDestroy 挂载完毕,数据更新完成之后;解除绑定,销毁子组件以及事件监听器之前调用...,的键是要监听的对象或者变量,值一般是函数,当你侦听的元素发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。...5.2 执行get请求 // 为给定 ID 的 user 创建请求 // then是请求成功的响应,catch是请求失败的响应 axios.get('/user?...// 定义函数的一般方式 /* function fnRs(a,b){ var rs = a + b; alert(rs); } fnRs(1,2); */ // 通过匿名函数赋值来定义函数

80610

腾讯前端vue面试题合集2

用户的任何导航行为都会走navigate方法,内部有个guards队列按顺序执行用户注册的守卫钩子函数,如果没有通过验证逻辑则会取消原有的导航。...原理runGuardQueue(guards)链式的执行用户在各级别注册的守卫钩子函数通过则继续下一个级别的守卫,不通过进入catch流程取消原本导航// 源码runGuardQueue(guards...缓存后怎么更新缓存组件使用keep-alive组件,这是一个非常常见且有用的优化手段,vue3中keep-alive有比较大的更新,能说的点比较多思路缓存用keep-alive,的作用与用法使用细节,...,内部定义了一个map,缓存创建过的组件实例,返回的渲染函数内部会查找内嵌的component组件对应组件的vnode,如果该组件在map中存在就直接返回。...封装,就可以让我们可以领略到的魅力封装 axios 没有一个绝对的标准,只要你的封装可以满足你的项目需求,并且用起来方便,那就是一个好的封装方案Vue 为什么要用 vm.

1.1K30

重学巩固你的Vuejs知识 2020-04-08

当我们修饰的标识符不会被再次赋值,就可以使用const来保证数据的安全性。...单选,只能选择一个值,v-model绑定的是一个值。当我们选中option中的一个,会将它对应的value赋值到mySelect中。 多选,可以选中多个值。v-model绑定的是一个数组。...子组件过多时,需要拿其中一个,不能确定的索引值,还可能发生变化。...说明: watcher通过回调函数更新view;observer观测data数据,通过get通知dep收集watcher,dep通过notify()通知watcher数据更新,watcher通过addDep...Mutation状态更新 Vuex的store的更新唯一方式,提交Mutation Mutation的主要包括两部分: 字符串的事件类型 一个回调函数,该回调函数的第一个参数就是state mutation

1.8K20

【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系

当我们修饰的标识符不会被再次赋值,就可以使用const来保证数据的安全性。...单选,只能选择一个值,v-model绑定的是一个值。当我们选中option中的一个,会将它对应的value赋值到mySelect中。 多选,可以选中多个值。v-model绑定的是一个数组。...子组件过多时,需要拿其中一个,不能确定的索引值,还可能发生变化。...说明: watcher通过回调函数更新view;observer观测data数据,通过get通知dep收集watcher,dep通过notify()通知watcher数据更新,watcher通过addDep...Mutation状态更新 Vuex的store的更新唯一方式,提交Mutation Mutation的主要包括两部分: 字符串的事件类型 一个回调函数,该回调函数的第一个参数就是state mutation

1.6K10

(译) 如何使用 React hooks 获取 api 接口数据

状态和状态更新函数来自useState 的 hook。他是来负责管理我们这个 data 的状态的。userState 中的第一个值是data 的初始值。其实就是个解构赋值。...很显然,这是一个 bug!我们只想在组件第一次加载的时候获取数据 ,这也就是为什么你可以提供一个空数组作为 useEffect 的第二个参数以避免在组件更新的时候也触发。...在这个代码里面,我们使用 async/await 去获取第三方的 API 的接口数据,根据文档,每一个 async 都会返回一个 promise:async 函数声明定义了一个异步函数返回一个 AsyncFunction...然而,所有的这些状态,通过他们自己的状态管理,都属于同一个整体,因为他们所关心的数据状态都是请求相关的。正如你所看到的,他们都在 fetch 函数中使用。...他们属于同一类型的另一个很好的表现就是在函数中,他们是一个接着一个调用的(比如:setIsError、setIsLoading)。让我们用一个 Reducer Hook 来将这三个状态结合起来!

28.4K20
领券