axios post请求传递既可以传递json，又可以传递formdata

Question

后端要求一部分请求传formdata，一部分请求传json，
我目前设置了默认的header，可以用来传递formdata，如果header设置成application/json就可以传递json，但是就不能传递formdata了，，，，请问如何让有的请求可以传递json，请问如何才能实现后端的要求？？

import axios from 'axios'
import qs from 'qs'
//两处axios一处，返回状态一处
import * as _ from '../util/tool'

// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.defaults.baseURL = '/admin';
axios.defaults.withCredentials = true;


//POST传参序列化
axios.interceptors.request.use((config) => {
  if (config.method === 'post') {
    config.data = qs.stringify(config.data);
  }
  return config;
}, (error) => {
  _.toast("错误的传参", 'fail');
  // this.$Notice.error({
  //     title: '错误的传参',
  // });
  return Promise.reject(error);
});

//返回状态判断
axios.interceptors.response.use((res) => {
  //if (!res.data.success) {
    //去掉这个注释
  if (res.status!==200) {
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  _.toast("网络异常", 'fail');
  // this.$Notice.error({
  //     title: '网络异常',
  // });
  return Promise.reject(error);
});


export default function fetch(url, params, type){
  if(type=='get'){
    return new Promise((resolve, reject) => {
      axios.get(url)
        .then(response => {
          resolve(response.data);
        }, err => {
          reject(err);
        })
        .catch((error) => {
          reject(error)
        })
    })
  }else if(type=='post'){
    return new Promise((resolve, reject) => {
      axios.post(url, params)
        .then(response => {
          resolve(response.data);
        }, err => {
          reject(err);
        })
        .catch((error) => {
          reject(error)
        })
    })
  }

}

Answer 1

我觉得没这么复杂吧

let params = qs('blahblah')
let data = '{"json":"json"}'
axios.post(url,{
    params,// 这里传入form-data
    data,// 这里传入json
})

这个值得讨论讨论，因为我是觉得 form-data 编码是放入 url的。。

但是我试验了一下，貌似不太对。

如果题主用我的是对的，给我评论一下

Answer 2

文档上写了，post 还有第三个参数，这里可以设置 header

• 你的 fetch 方法可以通过增加参数控制 post 方法的 header
• fetch 方法也可以通过判断 params 参数自动设置 header

Answer 3

文章：再谈from属性EncType与axios分装—axios拦截器实现-源码浅析
https://www.zhoulujun.cn/html...
通过增加一个属性声明，如：commitType:'form'
于是，就会有如下代码

axios.interceptors.request.use(function (config) {
//TODO 请求拦截
/store.commit('updateLoadingStatus', {isLoading: true});/
if (config.commitType) {

if (config.commitType === 'form') {
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
  config.transformRequest = [function (data) {
    return queryString.stringify(data);//利用对应方法转换格式
  }]
} else if (config.commitType === 'url') {
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  config.transformRequest = [function (data) {
    return decodeURIComponent(data);
  }];
}

}

console.log(config);
return config;
}, function (error) {
//请求错误时做些事
return Promise.reject(error);
});