react 使用EventBus创建响应拦截器

原创 已于 2023-11-02 18:08:52 修改 · 268 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #typescript

于 2023-11-02 17:57:26 首次发布
本文介绍了如何在React应用中，由于hook的限制无法在ajax请求中直接使用，通过创建EventBus并实现事件发布与订阅，解决响应拦截器的问题。具体步骤包括在Utils工具中创建Events文件，以及在封装的请求方法中发布和app内订阅事件。

 events官网

npm i events

react 在 封装的ajax请求下不能使用 hook函数 可以使用  EventBus 封装响应拦截器 

在utils工具下创建一个Events文件

 

在封装请求的方法中 发布

在 app文件内订阅 

桥志三
关注
Mdebug：基于React开发的移动web调试工具
腾讯技术工程
09-01 1342
作者：thinkchen，腾讯 PCG 高级前端开发工程师mdebug是腾讯新闻 TNTWEB 团队推出的基于React开发的新的web调试工具, 沉淀自腾讯新闻微信手 q 双插件多年的移...
前端领域模板语法的监听器使用技巧
最新发布
AI架构全栈开发实战笔记
04-23 901
在现代前端开发中，模板语法是实现数据与视图分离的核心技术，而监听器作为响应式系统的关键组件，负责捕获数据变化并驱动视图更新。模板语法与监听器的关系模型依赖收集与变更检测的算法实现主流框架（Vue/Angular/React）的监听器设计对比自定义模板引擎中监听器的工程化实践性能优化与内存管理最佳实践核心概念：定义模板语法、监听器、响应式系统等基础术语，建立技术坐标系原理剖析：通过数学模型和算法实现，揭示依赖收集与变更检测的本质。
react实现一个拦截器，使请求自动携带jwt
qq_38615466的博客
03-19 634
我们在使用jwt的时候往往要配合拦截器的使用，否则每次请求都要我们手动设置请求头会大大降低效率。通过封装Axios创建一个Axios实例，并设置默认的请求头和拦截器。
拦截器
xueqing_的博客
04-27 370
request拦截器 import axios from ‘axios’ // 添加请求拦截器 axios.interceptors.request.use(config => { // const obj = JSON.parse(config.data) // config.data = JSON.stringify(obj) return config }, error => {...
react中使用axios,以及解决跨域
你还有我
07-28 1774
代码】react中使用axios,以及解决跨域。
react 封装axios请求拦截、响应拦截、封装post、get请求
liaorihua的博客
03-14 9266
默认你已经创建好了一个react项目 首先我们需要下载axios，我存储用户信息是用react-cookie,你们可以自己选择使用本地存储 npm i axios --save npm i react-cookie --save 然后在src目录下创建一个utils文件夹用于存放公用js， 继续utils目录下创建http.js文件。 另一个标记的index.js则是创建自带的入口文件 打开http.js文件，我们得开始干正事了 如果你已经下载好了axios和cookie则需要引入，其中axios是必须
VUE源码分析之eventBus原理
liubangbo的专栏
09-24 4926
VUE中eventBus可以用来进行任何组件之间的通信，我们可以把eventBus当成一个管道，这个管道两端可以接好多组件，两端的任何一个组件都可以进行通信。其实这个管道就是Vue实例，实例中的$on, $off, $emit方法来实现此功能。还是老样子，先通过简单例子看看eventBus怎么用。 <script src="./vue.js"></script> &lt...
实现NestJs事件驱动架构的轻量级EventBus模块
事件驱动总线模块与NestJs的其他特性，如中间件、守卫、拦截器、管道等，可以无缝集成。这意味着，可以在事件的发布或订阅过程中加入这些特性来增强功能。 #### 7. 可扩展性与维护性 由于事件驱动架构的特性，该...
React,Vue,Css3 ...等热门面试题
qq_70010470的博客
05-24 998
## 面试 * Fiber React Fiber是react执行渲染时的一种新的调度策略 JavaScript是单线程的 一旦组件开始更新 主线程就一直被React控制 这个时候如果再次执行交互操作 就会卡顿 页面首次渲染会创建一颗结构 一模一样的的Fiber节点树 Fiber在update的时候 会从原来的Fiber clone出一个新的Fiber 俩个Fiber diff出的变化 在更新结束后会取代之前的 Fiber节点树 渲染过程采用切片的方式
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
A曾大大的博客
04-15 1023
本篇文章整理总结了一些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上： css相关 更多教程：https://sucaiip.com/ 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高，垂直 4.表格，center,middle；水平垂直 5.disp...
React拦截器
大宇的博客，欢迎访问
02-28 1282
axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use（附示例代码）_阿小绿的博客-优快云博客_interceptors.request axios.interceptors.request.use(function(config){ //比如是否需要设置 token config.headers.token='wwwwwsdsdf' return config }) ...
react项目：react拦截器和token问题
初郁
11-07 2654
这次的交互遇到token问题真的毫无思路，之前想的是将登录的user保存到memoryUtils，通过判断是否有值来确定用户有没有登录，可当请求其他接口时，后端需要将token放到header里带着判断是否登录，以下是问题。 登录获取token后，如何对后面的接口统一在请求头header里面设置token，让后面的请求header都带有token。 axios拦截器（interceptor） 作用：当一个请求发出的时候，会先流过 interceptors 的 request 部分，接着请求会发出，当接受到响
react中axios拦截器
weixin_34062469的博客
04-27 2703
需求：项目中遇到接口判断用户是否有登陆态，如果没有，后端会重定向到登陆页 实际：请求接口返回302重定向，后端返回的登陆页也是302，不会显示出登陆页，因为当前页面的url为当前的页面，没有转到登陆页，需要前端判断将当前页面url改为登陆页的url 如何做：拦截axios请求 import axios from 'axios'; import { isObject } from 'lodash';...
react--axios响应拦截
冷月心的博客
01-15 1958
react--axios响应拦截
react中使用axios拦截器
北鼻娃的博客
11-24 1919
写在开头：项目中每次切换页面时都在全局的dva里面监听路由切换，调用一个checkToken方法，token失效就跳转登录页。但项目中的接口大部分都需要在请求头中带上登录后获取的token。思考：是不是可以取消checkToken这一步，直接在每个任意接口里判断token失效后跳转登录呢。搜索了下发现有拦截器这个东西，尝试封装一下调用方法，写的不对的请大佬指出！！！ 1、创建一个request.js文件 import axios from 'axios' import {history } from 'um
项目中 http响应拦截器
jiao512的专栏
07-03 1429
// 超时时间axios.defaults.timeout = 5000;// http请求拦截器axios.interceptors.request.use(config =&gt; {    // MintUI Loading方法    // Indicator.open();    return config;}, error =&gt; {    // Indicator.close();...
如何更好的在 react 中使用 axios 的拦截器
qq_42881675的博客
09-30 1785
title: 如何更好的在 react 中使用 axios 的拦截器 createAt: 2021-09-28 作者：玄晓乌屋 备注：转载与借鉴请注明出处。 前言 axios 算是当下最热门的前端 ajax 处理库，它简单易上手，扩展性强，功能齐全。 我之前在 react 中处理 axios 的封装一直没有找到很好的方式，因为 axios 是非常独立，并且提供的各种 api 都是一次性配置，例如 axios.create、axios.defaults，这让 react 对 axios 进行封装异常麻烦.
react axios和ajax网络请求拦截（session过期跳转登录页）
zywpurple的博客
07-26 9691
网络请求拦截经常也可用到，比如在所有接口消息请求头部加上验证信息token之类的，或者接口报某类错误时统一处理。这里主要用在请求接口时，判断session是否过期，统一返回状态码区分，如果过期了跳转登录页重新登录 拦截axios部分 重新封装axios请求 //axios拦截器 import axios from 'axios'; axios.defaults.timeout = 10...
vue2项目，前端写请求拦截器和响应式拦截器
06-23 4406
很可能进了个假互联网公司，遇到堆假后台，拦截器沦落到前端写。。。 import axios from 'axios' import vue from 'vue' import store from './../store/index' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值