Axios的POST请求按需采用Form或者JSON传输请求数据
公司更新了后台接口规范,POST请求参数数量3个及以上必须采用@RequestBody接收,3个以下可灵活使用json或者formdata传参,所以造成前端post请求某些采用json某些使用的是formdata。所以前端Axios需做适应性改造。
还好我们知道Axios是有一个前置请求拦截器的,所以封装的Axios工具类中我们可以根据接口配置采用不同的数据传输方式,具体我们根据传入的dataType类型来拦截,如果配置了类型为“form”,则拦截器中转换请求方式到form传输,拦截器代码:
import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url timeout: 15000 // 请求超时时间 }) // 请求 拦截器 service.interceptors.request.use(config => { // POST 请求采用 form表单还是 json 上传,默认json, 有特殊配置则改为form if (config.method.toUpperCase() === 'POST' && config.dataType && config.dataType.toUpperCase() === 'FORM') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded' config.transformRequest = [data => qs.stringify(data)] } return config })