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.headers

    return 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