react18封装公共请求函数

如果里面要处理比如token过期,跳转登录这种情况的话,官方又说组件外不允许使用Hooks函数,这里可以这样做

  • 使用redux 并新建一个store/index.ts
import { configureStore, combineReducers } from '@reduxjs/toolkit'
import counterRouter from './modules/router'
import counterSlice from './modules/counterSlice'
import getDataConfig from './modules/getDataConfig'
import { persistStore, persistReducer } from 'redux-persist'
// 选择持久化存储引擎,如 localStorage 或 AsyncStorage
import storage from 'redux-persist/lib/storage' // 默认使用localStorage作为存储引擎// 组合各个模块的reducer
const reducer = combineReducers({counter: counterRouter,contText:counterSlice,getDataConfig:getDataConfig
})// 配置持久化设置
const persistConfig = {key: 'root', // 存储的键名storage, // 持久化存储引擎// 可选的配置项,如白名单、黑名单等 选其一就好了blacklist:['contText'], // 只有 test 不会被缓存// whitelist: ["test"], // 只有 test 会被缓存
}const persistedReducer = persistReducer(persistConfig, reducer)export const storeData = configureStore({reducer: persistedReducer, // 注册子模块middleware: (getDefaultMiddleware) =>getDefaultMiddleware({serializableCheck: false // 关闭默认的序列化检查//关闭严格模式})
})//获取store中的所有reducer的数据类型并导出
export type RootState = ReturnType<typeof storeData.getState>
//提取dispatch数据类型
export type AppDispatch = typeof storeData.dispatch;export const persistor = persistStore(storeData)
这样的话,其他地方你就可以直接引入store文件,然后使用里面的方法或者获取store数据,不用在使用hooks函数

如果要跳转路由的话,可以这样window.location.href = “/login”;

新建request.ts //1.引入vue
// import Vue from 'vue'
//2.引入axios库
import axiosNew from 'axios';
import config from '@/config/index'//引入公用文件
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '@/store';
import { setToken } from '@/store/modules/getDataConfig';
// 引入 pinia  token
import {storeData} from "@/store"
import { increment } from '@/store/modules/router';// 引入接口地址axiosNew.defaults.timeout =3000;//请求超时时间axiosNew.interceptors.request.use(//请求拦截(config:any) => {// const useUserData=loginStore.tokenStore();config.headers['content-type'] = 'application/x-www-form-urlencoded';// console.log(config.headers,"请求头----",useSelector)// if (userToken) {//如果有token给请求头加上//     config.headers['authorization'] =userToken// }return config},err => {return Promise.reject(err);})
// let router=useRouter();// 获取登录TOKEN信息axiosNew.interceptors.response.use(response => {//相应拦截try{}catch(err){// console.log("在相应拦截这边其他请求不需要取token",err)};if(response.data.code==10001||response.data.code==402){//如果token为空或者过期,跳到登录// const dispatch: AppDispatch = useDispatch()// 清空token// dispatch(setToken(""))// 跳转登录}return response;
},err=>{return Promise.reject(err)}
);
function getTOken(){}
// axiosNew.defaults.baseURL=""
const axios=function(path:string,method:string,data:any){// const routerStroe=useSelector((state:RootState) => state.getDataConfig)var header:any;// 如果存在token就放进去header=config.headersreturn new Promise((resolve,reject)=>{let datas:any={params:{...data}}// let b=qs.parse(datas)if(method==="POST"||method=="post") datas={...{data}};// console.log(qs.stringify(data),"参数---",b)axiosNew({url:`${config.url}/xys/api/${path}`,method,header: header,...datas}).then(res=>{if(res.data.code == 0){resolve(res.data.data)}else if([410000, 410001, 410002, 10032].indexOf(res.data.code) !== -1){// 登录过期跳转登录页window.location.href = "/login";//    清空storeData.dispatch(setToken(""))}else{resolve(-1)// ElMessage.error(res.data.message)}}).catch(err=>{storeData.dispatch(setToken(""))// const navigate=useNavigate()// navigate("/login")// window.location.href = "/login";resolve(-1)// ElMessage.error('请求失败,请稍后再试...')})})
};
const request:any = {};['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {request[method] = (api: any, data: any, opt: any) => axios(api, method, data)
});
export default request

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/835680.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript创建日期

创建日期 在JavaScript中创建日期有四种方法 ● 使用new Date() const now new Date(); console.log(now);● 直接输入月、日、年、时间 console.log(new Date(Aug 02 2024 18:05:41));● 也可以输入年月日 console.log(new Date(December 24, 2015));● 直接按照年、月、…

用于接收参数的几个注解

了解四种主要请求方法的传参格式 GET方法&#xff1a; 参数通常通过URL的查询字符串&#xff08;query string&#xff09;传递&#xff0c;形式为key1value1&key2value2。示例&#xff1a;http://example.com/api/resource?key1value1&key2value2 POST方法&#xf…

C++入门系列-析构函数

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 析构函数 概念 析构函数&#xff0c;与构造函数功能相反&#xff0c;析构函数不是完成对对象本身的销毁&#xff0c;局部对象销毁工作是由编译器完成的&#xff0c;而对象在销…

基于深度学习的人体关键点检测与姿态识别

文章目录 源码下载地址&#xff1a; 源码地址在视频简介中 深度学习人体关键点检测&#xff0c;姿态识别 界面效果&#xff1a; 界面代码&#xff1a; from PyQt5.QtGui import * from PyQt5.QtWidgets import * from PyQt5.QtGui import * from PyQt5.QtWidgets import * f…

OGG几何内核开发-BRepAlgoAPI_Fuse与BRep_Builder.MakeCompound比较

最近在与同事讨论BRepAlgoAPI_Fuse与BRep_Builder.MakeCompound有什么区别。 一、从直觉上来说&#xff0c;BRepAlgoAPI_Fuse会对两个实体相交处理&#xff0c;相交的部分会重新的生成相关的曲面。而BRep_Builder.MakeCompound仅仅是把两个实体组合成一个新的实体&#xff0c;…

Apache Sqoop:高效数据传输工具搭建与使用教程

目录 引言一、环境准备二、安装sqoop下载sqoop包解压文件 三、配置Sqoop下载mysql驱动拷贝hive的归档文件配置环境变量修改sqoop-env.sh配置文件替换版本的commons-lang的jar包 验证Sqoop安装查看Sqoop版本测试Sqoop连接MySQL数据库是否成功查看数据库查看数据表去除警告信息 四…

【免费】在线识别通用验证码接口

模块优势价格5元1000次&#xff0c;每天免费100次api文档支持 使用量小的完全够用了 <?phpfunction Post_base64($base64_str){$url http://api.95man.com:8888/api/Http/Recog?Taken41******QK&imgtype1&len0 ; $fields array( ImgBase64>$base64_str); $ch…

031.下一个排列Java实现

题意 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列。更正式地&#…

【退役之重学Java】Redis 持久化机制及其选择

一、RDB RDB 持久化机制&#xff0c;对 Redis 中的数据执行周期性的持久化 二、AOF AOF 机制对每条写入命令最为日志&#xff0c;以 append-only 的模式写入一个日志文件中&#xff0c;在 Redis 重启的时候&#xff0c;可以通过回放 AOF 日志中的写入指令&#xff0c;来重新…

SHELL脚本编程----sshd服务启停脚本

题目&#xff1a; 判断 sshd 进程是否运行&#xff0c;如果服务未启动则启动相应服务。 具体代码实现&#xff1a; #!/bin/bashsshd_servicesystemctl is-active sshdif [ "$sshd_service" "active" ]; thenecho "sshd is running....." els…

跟我学C++中级篇——内联补遗

一、内联引出的问题 在将一个内联变量定义到编译单元时&#xff0c;然后再按正常的方式使用时&#xff0c;编译会报一个错误“odr-used”。ODR&#xff0c;One Definition Rule&#xff0c;单一定义规则。在C/C程序中&#xff0c;变量的定义只能有一处&#xff0c;至于ODR的规…

移除链表元素(C语言)———链表经典算法题

题目描述&#xff1a;203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 答案展示: 答1&#xff08;遍历删除&#xff09;&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNo…

第十七章 数据管理和组织变革管理练习

单选题 (每题1分,共10道题) 1、 [单选] 以下不属于科特确定了有效传播愿景关键要素是? A:保持简单 B:使用比喻、类比和例子 C:重复,重复,再重复 D:解释表面上的一致性 正确答案:D 你的答案:D 解析:详见书本P469 七大要素,D选项和第六要素 不一致和一致性 2、 …

c++多态机制

多态 在 C 中&#xff0c;多态&#xff08;Polymorphism&#xff09;是一种面向对象编程的重要概念&#xff0c;它允许不同类的对象对同一消息做出不同的响应。具体来说&#xff0c;多态性允许基类的指针或引用在运行时指向派生类的对象&#xff0c;并且根据对象的实际类型来调…

微信小程序支付全攻略:从零搭建到安全交易【微信支付】

微信小程序支付全攻略&#xff1a;从零搭建到安全交易 在移动互联网时代&#xff0c;微信小程序凭借其便捷性和高效性&#xff0c;成为了众多企业和开发者的心头好。其中&#xff0c;微信支付和小程序支付功能的集成&#xff0c;无疑是提升用户体验、增加商业转化的关键环节。…

1.5编程基础之循环控制 03:均值

描述 给出一组样本数据&#xff0c;计算其均值。 输入 输入有两行&#xff0c;第一行包含一个整数n&#xff08;n小于100&#xff09;&#xff0c;代表样本容量&#xff1b;第二行包含n个绝对值不超过1000的浮点数&#xff0c;代表各个样本数据。 输出 输出一行&#xff0…

CentOS 安装 Portainer

Portainer Community Edition是一个针对容器化应用程序的轻量级服务交付平台&#xff0c;可用于管理 Docker、Swarm、Kubernetes 和 ACI 环境。它的设计理念是部署和使用都简单&#xff0c;该应用程序允许您通过“智能”GUI 和/或广泛的 API 管理所有编排器资源。 1、查询Porta…

第七届精武杯部分wp

第一部分&#xff1a;计算机和手机取证 1.请综合分析计算机和手机检材&#xff0c;计算机最近一次登录的账户名是 答案&#xff1a;admin 创建虚拟机时直接给出了用户名 2. 请综合分析计算机和手机检材&#xff0c;计算机最近一次插入的USB存储设备串号是 答案&#xff1a…

抖音快速涨粉秘籍解密!从巨量千川投流真实粉丝,快速增粉1000~10万!

随着抖音的风靡&#xff0c;对于众多用户来说&#xff0c;快速涨粉已经成为了追求的目标。在这篇文章中&#xff0c;我们将揭秘全网都在搜索的抖音快速涨1000粉的方法&#xff0c;帮助你打造一个高人气的抖音账号&#xff01;从巨量千川投流到官方真实流量&#xff0c;再到真实…

外卖系统微信小程序支付

微信小程序支付时序图 其中第9.步骤就是微信小程序前端调用wx.requestPayment