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()
相关推荐
freewlt11 分钟前
前端安全新范式:2026年防护实战
前端·安全
包子源12 分钟前
React-PDF 详解:API 要点与在线简历项目中的落地
前端·react.js·pdf
Bigger17 分钟前
第九章:我是如何剖析 Claude Code 的 CLI 里的安全沙盒与指令拦截机制的
前端·claude·源码阅读
得想办法娶到那个女人21 分钟前
Vue3 组合式API 标准写法(通俗易懂,可直接复制)
前端·javascript·vue.js
_深海凉_22 分钟前
LeetCode热题100-最长公共子序列
java·开发语言·前端
蓝天客25 分钟前
接入支付 FM 接口实战经验
前端
liyi_hz200827 分钟前
O2OA V10 升级说明(二)内容管理:更安全、更融合、更适配移动办公
java·前端·数据库
a11177627 分钟前
PascalEditor( 3D建筑编辑器 开源)
前端·开源·html
爱上好庆祝27 分钟前
移动端适配
前端·css·学习·html·css3
overmind28 分钟前
oeasy Python 123 元组_运算_封包解包_欢乐颂_大写数字
java·前端·python