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

我对axios错误的Redux处理应该使用不同的操作,还是使用附加了附加数据的相同操作?

对于axios错误的Redux处理,可以根据具体情况选择不同的操作方式。下面是两种常见的处理方式:

  1. 使用不同的操作:
    • 当错误是由于网络请求失败或服务器返回错误状态码时,可以使用不同的操作来处理。例如,可以在Redux中定义一个专门用于处理网络请求错误的action,将错误信息存储到Redux的store中,并在需要的地方进行展示或处理。
    • 这种方式可以通过定义不同的action类型和相应的reducer来实现,可以更好地区分不同类型的错误,并进行相应的处理。
  • 使用附加了附加数据的相同操作:
    • 当错误需要携带额外的数据或上下文信息时,可以使用附加了附加数据的相同操作来处理。例如,可以在Redux中定义一个通用的错误处理action,接收错误信息和额外的数据作为参数,并将它们一起存储到Redux的store中。
    • 这种方式可以通过在action中定义一个payload对象,包含错误信息和附加数据,然后在reducer中进行相应的处理和存储。

需要根据具体情况来选择合适的处理方式。如果错误类型较多或需要携带额外的数据,建议使用附加了附加数据的相同操作;如果错误类型较少且不需要携带额外的数据,可以使用不同的操作来更好地区分和处理不同类型的错误。

关于Redux的使用,可以参考腾讯云提供的云开发文档,其中包含了Redux的介绍、使用方法和示例代码:腾讯云云开发文档 - Redux

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

相关·内容

使用React Query做为axios请求库上层封装

前言 在项目中,通常都需要跟服务端进行异步数据交互,基本都是用到axios这个库来做请求,嗯,毕竟拥有80k star,明星项目 接下来,我们来回顾下axios在项目中使用 以查询用户信息为例,我们会这样封装...,我们不仅要请求数据,还要处理相应loading,error这些中间态,这类通用中间状态处理逻辑可能在不同组件中重复写很多次。...其实对于redux等状态管理库,本身是没有异步这个概念,只有mutation这种操作,为了支持异步,硬是强加了异步action这种操作,实际这些异步中间件就是在最后请求回调透传了dispatch,诸如这些情况...,我们不仅将数据一锅炖放在全局状态管理上,写法上也使得项目越来越臃肿了(以至于出现后面rematch、dva方案进行简化),我们有没有想过,服务端状态就不应该放在全局状态管理上,全局状态管理应该专门处理用户交互中间状态...解决了什么问题 服务端状态有以下特点: 存储在远端,本地无法直接控制 需要异步 API 来查询和更新 可能在不知情情况下,被另一个请求方更改了数据,导致数据不同步 现有的状态管理库(如 Mobx、Redux

2.2K30

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

如果你async/await熟悉的话,你会知道,每个async函数都会默认返回一个隐式promise。但是,useEffect不应该返回任何内容。...query state 相同状态,因为组件首先会在mount时获取数据。...loading处理完成后,还需要处理错误,这里逻辑是一样使用useState来创建一个新state,然后在useEffect中特定位置来更新这个state。...4.3 处理表单 通常,我们不仅会用到上面的输入框和按钮,更多时候是一张表单,所以也可以在表单中使用useEffect来处理数据请求,逻辑是相同: function App() { ......如果你 hook 很了解,你应该知道,React 提供了一些特殊 effect hook:比如 useMutationEffect() 和 useLayoutEffect()。

9.6K20
  • 为什么不再用Redux

    现在,前端开发中很大一部分负担来自于我们全局存储维护工作,我们还要确保这些存储不会遭受状态错误数据非规范化和陈旧数据困扰。...现在,人们围绕 Redux 构建了无数库(redux-observable、redux-saga 和 redux-thunk 等),以帮助我们管理后端数据,每个库都为已经繁琐不已库又增加了一层复杂性...后端状态更简单方法 认为有两个库比使用 Redux(或类似的状态管理库)存储后端状态要好用很多。...使用常规 JS、React Hooks 和 axios 实现了一个从服务器获取简单 TODO 列表。...处理完应用程序数据获取 / 缓存部分后,前端几乎没有全局状态可处理。可以使用 Context 或 useContext+useReducer 处理剩下少量内容,代替 Redux 作用。

    2.6K20

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

    原文地址:robinwieruch 全文使用意译,不是重要就没有翻译了 在本教程中,想向你展示如何使用 state 和 effect 钩子在React中获取数据。...它将引导您完成使用React类组件数据获取,如何使用Render Prop 组件和高阶组件来复用这些数据,以及它如何处理错误以及 loading 。...异步函数是通过事件循环异步操作函数,使用隐式 Promise 返回结果然而,effect hook 不应该返回任何内容,或者清除功能。...目前我们已经通过组件第一次加载时候获取了接口数据。但是,如何能够通过输入字段来告诉 api 接口那个主题感兴趣呢?(就是怎么给接口传数据。... ); } 为了防止浏览器 reload,我们这里加了一个event.preventDefalut(),然后别的操作就是正常表单操作了 自定义获取数据 hook(Custom

    28.5K20

    RxJS & React-Observables 硬核入门指南

    Redux-observable是一个基于rxjsRedux中间件,允许开发者使用异步操作。它是redux-thunk和redux-saga替代品。...X(叉)表示由Observable发出错误。 “completed”和“error”状态是最终状态。这意味着,observable在成功完成或遇到错误后不能发出任何数据。...Subscriber结构类似于观察者,它有相同3个方法:.next、.error和.complete。 observable可以使用.next方法将数据推送到Observer。...但我不讨厌redux- tank,喜欢它,每天都在使用它! 练习1:调用API 用例:调用API来获取文章注释。当API调用正在进行时显示加载器,并处理API错误。...当我们开始使用全局变量时,我们action creator就不再是纯函数了。使用全局变量action creator进行单元测试也变得很困难。

    6.9K50

    前端二面高频react面试题集锦_2023-02-23

    ,随后替换页面中之前真实DOM 【旧虚拟DOM】 中未找到 与 【新虚拟DOM】相同key 根据数据创建真实DOM,随后渲染到页面 React-Router 4怎样在路由变化时重新渲染同一个组件...此函数必须保持纯净,即必须每次调用时都返回相同结果。 Redux 中间件是什么?接受几个参数?柯里化函数两端参数具体是什么?...Refs 应该谨慎使用,如下场景使用 Refs 比较适合: 处理焦点、文本选择或者媒体控制 触发必要动画 集成第三方 DOM 库 Refs 是使用 React.createRef() 方法创建,他通过...React状态提升就是用户对子组件操作,子组件不改变自己状态,通过自己props把这个操作改变数据传递给父组件,改变父组件状态,从而改变受父组件控制所有子组件状态,这也是React单项数据特性决定...在输出时候,是输出 Web DOM,还是 Android 控件,还是 iOS 控件,就由平台本身决定了。所以,react很方便和其他平台集成 React事件和普通HTML事件有什么不同

    2.8K20

    前端网红框架插件机制全梳理(axios、koa、redux、vuex)

    还是 response 拦截器,都会接受两个函数作为参数,一个是用来处理正常流程,一个是处理失败流程,这让人想到了什么?...config,也可以在响应阶段 response 做各种处理,这也是因为用户对于请求数据需求就是非常灵活,没有必要干涉用户自由度。...// 返回其实还是一个结构相同dispatch,接受参数也相同 // 只是把原始dispatch包在里面了而已。...有相似之处,但是在源码理解和使用上个人感觉更优于 redux 中间件。...中间件机制其实是非框架强相关,请求库一样可以加入 koa 洋葱中间件机制(如 umi-request),不同框架可能适合不同中间件机制,这还是取决于你编写框架想要解决什么问题,想给用户什么样自由度

    1.9K30

    百度前端高频react面试题(持续更新中)_2023-02-27

    需要使用状态操作组件(无状态组件也可以实现新版本react hooks也可实现) 总结: 类组件可以维护自身状态变量,即组件 state ,类组件还有不同生命周期方法,可以让开发者能够在组件不同阶段...而不是为每个状态更新编写一个事件处理程序。 React官方解释: 要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。... React context 理解 在React中,数据传递一般使用props传递数据,维持单向数据流,这样可以让组件之间关系变得简单且可预测,但是单项数据流在某些场景中并不适用。...Refs 应该谨慎使用,如下场景使用 Refs 比较适合: 处理焦点、文本选择或者媒体控制 触发必要动画 集成第三方 DOM 库 Refs 是使用 React.createRef() 方法创建,他通过...ref 属性附加到 React 元素上。

    2.3K30

    Koa洋葱中间件,Redux中间件,Axios拦截器,一个精简版就彻底搞懂了。

    (error) { // 响应错误做点什么 return Promise.reject(error); }); 复制代码 可以看出,不管是request还是response拦截求...可以在请求阶段任意修改config,也可以在响应阶段response做各种处理,这也是因为用户对于请求数据需求就是非常灵活,没有必要干涉用户自由度。.../ 返回其实还是一个结构相同dispatch,接受参数也相同 // 只是把原始dispatch包在里面了而已。...,但是在源码理解和使用上个人感觉更优于redux中间件。...中间件机制其实是非框架强相关,请求库一样可以加入koa洋葱中间件机制(如umi-request),不同框架可能适合不同中间件机制,这还是取决于你编写框架想要解决什么问题,想给用户什么样自由度

    2K10

    redux-saga_pub culture

    并且通过触发不同action, 我们可以控制这些副作用状态, 例如,启动,停止,取消。 所以,我们可以理解为Sage是一个可以用来处理复杂异步逻辑模块,并且由reduxaction触发。...Saga后,react只负责数据如何展示,redux来负责数据状态和绑定数据到react,而Saga处理了大部分复杂业务逻辑。...开始前需要了解几个概念 redux中间件 redux中文文档解释如下: 如果你使用过 Express 或者 Koa 等服务端框架, 那么应该 middleware 概念不会陌生。...比如,做一个计数器按钮,用户需要不断点击按钮,后台数据更新,这里可以使用takeEvery来触发。...比如,我们需要一个刷新按钮, 让用户可以手动从后台刷新数据, 当用户不停单机刷新时候, 应该最新一次请求数据被刷新在页面上,这里可以使用takeLatest。

    1.4K10

    前端三大主流框架区别(三)

    优点: 1、后台(facebook) 2、轻量,体积小本来应该是算在react和vue优点中,但是在一个大型项目中,就比如一般react要用是 react+redux+react-router...4、react-native,一个优秀移动端开发框架,使用react特有的jsx语法,可以让开发人员像写pc端页面那样去写移动端,它自动适配了不同移动端屏幕分辨率。...而且在js中写html时就要避免两者出现相同关键字,比如class,在jsx中就要写成className,还要是驼峰式写法 3、使用reduxredux处理数据时候是使用saga语法,开发人员要去学习...saga写法,然后saga异步操作和同步操作是分开在两个函数中写,要在组件本身写一次,数据流到父组件时还要再写一遍,写法上要更复杂,如果想简化它,就要用一个前端应用框架-DVA,就还是通过加东西来增加开发效率...2、vuex,完成了redux功能且在写法上更加便捷,不再需要dva这种框架去帮他简便写法。 3、vue体积是三个框架中最小,加上它处理机制,在非大型项目的对比中,它性能是最高

    78510

    万万没想到react请求数据花样如此之多

    说来说去,说简单点,一个web应用,应该是状态驱动,而状态=数据+逻辑所以,我们UI=Render(Data+Logic) 那么,Data从何而来,可以说99%web应用Data是从网络而已,俗称网络获取数据...下面的代码段是一个很简单显示列表数据模板,很简单,这里只用到了useState这个Hook,如果需要填充数据,很明显,使用setData给到数据就可以了,数据从何而来,这是一个问题,带到今天来看,要讲的是如何从网络获取数据...所以,如果需要加什么错误状态,你应该也懂这个套路了吧。 请注意,要开车了,前面说到,更好复用才是推动技术变革第一生产力,比如Docker,瞎扯。...复用性无话可说,方便做备忘录,使用一个history数组记录每次变更state就OK啦。anymore,自己YY吧。...,走触发变更ui逻辑,导致crash发生,因为你不能对一个已经destory页面进行变更ui操作

    1.3K81

    都 2022 年了,手动搭建 React 开发环境很难吗?

    production webpack -c scripts/webpack.prod.js", + "ts:checker": "tsc --noEmit", 同时安装一下 cross-env,该模块主要是用于支持在不同操作系统下保证环境变量正确...,终端更清爽 }); 这里增加了 scss/css 文件处理,因此还需要安装相关模块: # style-loader 将 css 注入到 HTML 内联样式 # css-loader 用于加载...但通常我们项目应该是比较庞大复杂,为了提升后期可维护性,因此使用Redux 作为全局状态管理 Redux 另一大优势则是提供了 @reduxjs/toolkit[4] 辅助工具,使得状态管理更加简单...6.2 请求错误自动重试扩展示例 Axios 生态也非常丰富,例如可以加入 axios-retry[11] 模块,扩展 Axios 请求错误自动尝试。...三步骤思考方式,相信一定可以有更多收获! 这篇文章,本应该早就完成,既是自己目前掌握一些项目搭建设计知识一个简单回顾和查漏补缺,也是希望能够帮助到更多同学。

    4.7K40

    前端高频react面试题

    因为 Hooks 设计是基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。当然,实质上 React 源码里不是数组,是链表。...=id0值也是1因为子元素相同,就不删除并更新,只做移动操作,这就提升了性能Redux 状态管理器和变量挂载到 window 中有什么区别两者都是存储数据以供后期使用。...一些库如 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足是,React 依旧把处理 state 中数据问题留给了你。Redux就是为了帮你解决这个问题。...这个问题就设计到了数据持久化, 主要实现方式有以下几种:Redux: 将页面的数据存储在redux中,在重新加载页面时,获取Redux数据;data.js: 使用webpack构建项目,可以建一个文件...时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

    3.4K20

    一天梳理完react面试高频题

    这种机制可以让我们改变数据流,实现如异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...处理异步操作,actionCreator返回值是promise如何配置 React-Router 实现路由切换(1)使用 组件路由匹配是通过比较 path 属性和当前地址...单向数据流模式,所以props是从父组件传入子组件数据Redux 中异步请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...只对同级比较,跨层级dom不会进行复用不同类型节点生成dom树不同,此时会直接销毁老节点及子孙节点,并新建节点可以通过key来元素diff过程提供复用线索单节点diff单点diff有如下几种情况...:key和type相同表示可以复用节点key不同直接标记删除节点,然后新建节点key相同type不同,标记删除该节点和兄弟节点,然后新创建节点在调用setState 之后发生了什么状态合并,触发调和:

    4.1K20

    一天梳理完react面试题

    react和vue区别相同点:数据驱动页面,提供响应式试图组件都有virtual DOM,组件化开发,通过props参数进行父子之间组件传递数据,都实现了webComponents规范数据流动单向...4)错误处理阶段componentDidCatch(error, info),此生命周期在后代组件抛出错误后被调用。 它接收两个参数∶error:抛出错误。...而不是为每个状态更新编写一个事件处理程序。React官方解释:要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。...=id0值也是1因为子元素相同,就不删除并更新,只做移动操作,这就提升了性能为什么 React 要用 JSX?...但是在已经使用redux来管理和存储全局数据基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能框架呢?

    5.5K30

    2023 React 生态系统,以及一些吐槽……

    这些工具所有的 Redux 用户都应该有益。无论你是个新 Redux 用户,还是一个经验丰富用户希望简化现有的应用程序,Redux Toolkit 都可以帮助改进你 Redux 代码。...这在实现当今应用程序中使用其他行为时变得更加复杂: 跟踪加载状态以显示 UI 加载指示器 避免相同数据进行重复请求 进行乐观更新以提高 UI 响应速度 随着用户与 UI 进行交互,管理缓存生命周期...虽然可以使用Redux 这样状态管理库来缓存数据,但这些用例足够不同,值得使用专为数据获取用例而构建工具。...不是因为认为 React 在实现表单方面采取了错误方法,而是因为在使用 React 时,表单是最具挑战性问题。 许多框架都有自己解决方案来处理表单。AngularJS 在这方面做得非常好。...之前使用过 Formik,但成果并不太理想。对于普通表单来说,它表现得很好,但在多步骤表单方面有些困难。虽然后来他们添加了“向导”表单,但使用起来并不太直观。

    72830

    webpack4 中 React 全家桶配置指南,实战!

    最新React全家桶实战使用配置指南 这篇文档 是在听 吕小明老师课程,吕老师结合以往项目经验 加上自己本身react webpack redux理解写下总结文档,总共耗时一周总结下来,希望能对读者能够有收获..., 是在这基础多些加工,希望你们有所收藏 版本说明 由于构建相关例如webpack,babel等更新较快,所以本教程以下面各种模块版本号为主,切勿轻易修改或更新版本。...,那么久应该使用 redux-thunk 了。...promises 异步调用操作,并一组 Promises执行某些操作。...是小智,前端技术保持学习爱好者。我会经常分享自己所学所看干货,在进阶路上,共勉!

    1.9K20

    从源码分析expresskoareduxaxios等中间件实现方式

    处理 Web 请求时,我们常常需要进行验证请求来源、检查登录状态、确定是否有足够权限、打印日志等操作,而这些重复操作如果写在具体路由处理函数中,明显会导致代码冗余,这个时候,我们就可以将这些通用流程抽象为中间件函数...,如果需要使用路由、错误处理、认证等功能需要自己安装并引入,什么都需要自己DIY。...nest 有些人说是 node 版 spring boot,觉得不对,应该说 node 版 angular。3....(  function(response) {    // 响应数据做点什么    return response;  },  function(error) {    // 响应错误做点什么    ...,每个中间件返回值都是一个与原始store.dispatch方法签名相同方法,通过遍历中间件,返回一个组合后增强版dispatch方法redux中间件机制本质上就是用高阶函数不断把 dispatch

    1.9K40
    领券