axios请求的问题

本来不想记录,但是实在没有办法,因为总是会出现post请求,后台接收不到数据的情况,还是记录一下如何的解决的比较好。
但是我使用export const addPsiPurOrder = data => request.post('/psi/psiPurOrder/add', data);
下面是封装的代码。后台接收不到数据.
1
出现问题的主要原因是java对象中如果有日期字段,且这些字段从前台传给后端,一定要加上下面的字段。需要加上下面的配置,
1

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()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

warrah

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值