axios请求的问题

本来不想记录,但是实在没有办法,因为总是会出现post请求,后台接收不到数据的情况,还是记录一下如何的解决的比较好。

但是我使用export const addPsiPurOrder = data => request.post('/psi/psiPurOrder/add', data);

下面是封装的代码。后台接收不到数据.

出现问题的主要原因是java对象中如果有日期字段,且这些字段从前台传给后端,一定要加上下面的字段。需要加上下面的配置,

js 复制代码
import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'
import { baseURL } from '@/config/domain'
import { TokenName } from '@/config/const'
import { useAppStoreWithOut } from '@/store'
import { usePermission } from '@/hooks'
import router from '@/router'
import { localMng } from '@/utils/storage-mng'

class Request {
	private baseConfig: AxiosRequestConfig = {
		baseURL,
		headers: {
			'Group':'xxxx',
			'Tenat':'yyyy',
			'source': 'zzzz',
		},
		timeout: 10000,
	}

	private instance: AxiosInstance = axios.create(this.baseConfig)

	public constructor() {
		const token = localMng.getItem(TokenName)
		if (token) {
			this.setHeader({
				Authorization: token,
			})
		} else {
			this.initInstance()
		}
	}

	private initInstance() {
		this.instance = axios.create(this.baseConfig)
		this.setReqInterceptors()
		this.setResInterceptors()
	}

	// 请求拦截器
	private setReqInterceptors = () => {
		this.instance.interceptors.request.use(
			config => {
				// const { checkApiPermission } = usePermission()
				config.cancelToken = new axios.CancelToken(function executor(c) {
					// if (!checkApiPermission(config.url)) {
					//   c(config.url + '没有权限')
					//   router.push('/error/forbidden')
					// }
				})
				// console.log(`%c++++++ 开始请求:${config.url} ++++++`, 'color:green')
				// console.log(config.data)
				// console.log(`%c++++++ end ++++++`, 'color:green')
				return config
			},
			err => {
				window.$message.error('请求失败')
				return Promise.reject(err)
			}
		)
	}

	// 响应拦截器
	private setResInterceptors = () => {
		this.instance.interceptors.response.use(
			res => {
				let { success, code, body, msg } = res.data
				if(success || (!code || code == 200 || code == '0000')){ code = 200 }
				switch (code*1) {
					case 200:
						console.log(res.data,'res');
						return Promise.resolve(body || res.data)
					case 40301:
						window.$message.warning(msg || '无权限')
						const appStore = useAppStoreWithOut()
						appStore.logout()
						return Promise.reject(res.data)
					default:
						window.$message.error(msg || '响应失败')
						return Promise.reject(res.data)
				}
			},
			err => {
				if (!axios.isCancel(err)) {
					window.$message.error('响应失败')
				}
				return Promise.reject(err)
			}
		)
	}

	// 设置请求头
	public setHeader = (headers: any) => {
		this.baseConfig.headers = { ...this.baseConfig.headers, ...headers }
		this.initInstance()
	}

	// get请求
	public get = (url: string, data = {}, config: AxiosRequestConfig<any> = {}): Promise<any> =>
		this.instance({ url, method: 'get', params: data, ...config })

	// post请求
	public post = (url: string, data = {}, config: AxiosRequestConfig<any> = {}): Promise<any> =>{
		console.log({...config})
		return this.instance({ url, method: 'post', data, ...config });
	}
		

	public postForm = (url: string, data = {} , config: AxiosRequestConfig<any> = {}): Promise<any> => {
		config.headers  = {...this.baseConfig.headers,'Content-Type': "multipart/form-data"}
		return this.instance({ url, method: 'post', data, ...config })
	}

	public postJson = (url: string, data = {} , config: AxiosRequestConfig<any> = {}): Promise<any> => 
	axios({
		...this.baseConfig,
		headers:{
			...this.baseConfig.headers,
			'Content-Type': "application/json;charset=utf-8"
		},
		url,
		method: 'post',
		data,
		...config,
	})

	// 不经过统一的axios实例的post请求
	public postOnlyFile = (url: string, data = {} , config: AxiosRequestConfig<any> = {}): Promise<any> =>
	axios({
		...this.baseConfig,
		headers:{
			...this.baseConfig.headers,
			'Content-Type': "application/x-www-form-urlencoded"
		},
		url,
		method: 'post',
		data,
		...config,
	})

	// put请求
	public put = (url: string, data = {}, config: AxiosRequestConfig<any> = {}): Promise<any> =>
		this.instance({ url, method: 'put', data, ...config })

	// 不经过统一的axios实例的get请求
	public postOnly = (url: string, data = {}, config: AxiosRequestConfig<any> = {}): Promise<any> =>
		axios({
			...this.baseConfig,
			url,
			method: 'post',
			data,
			...config,
		})


	public getOnlyFile = (url: string, data = {} , config: AxiosRequestConfig<any> = {}): Promise<any> =>
		axios({
			...this.baseConfig,
			url,
			method: 'get',
			responseType:'blob',
			params: data,
			...config,
		})

	public getOnly = (url: string, data = {}, headers , config: AxiosRequestConfig<any> = {}): Promise<any> =>
		axios({
			...this.baseConfig,
			headers:{
				...this.baseConfig.headers,
				...headers,
			},
			// this.baseConfig.headers:{ ...this.baseConfig.headers, ...headers },
			url,
			method: 'get',
			params: data,
			...config,
		})

	// delete请求
	public deleteBody = (url: string, data = {}, config: AxiosRequestConfig<any> = {}): Promise<any> =>
		this.instance({ url, method: 'delete', data, ...config })

	public deleteParam = (url: string, data = {}, config: AxiosRequestConfig<any> = {}): Promise<any> =>
		this.instance({ url, method: 'delete', params: data, ...config })
}

export default new Request()
相关推荐
发现一只大呆瓜1 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
m0_719084112 小时前
React笔记张天禹
前端·笔记·react.js
Ziky学习记录2 小时前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n2 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n2 小时前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
狗哥哥3 小时前
微前端路由设计方案 & 子应用管理保活
前端·架构
奔跑路上的Me3 小时前
axios 请求头封装过程遵循「最小可用 → 逐步增强」
axios
前端大卫3 小时前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘4 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare4 小时前
浅浅看一下设计模式
前端