本文主要是介绍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这篇关于react18封装公共请求函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
