axios支持form-data和x-www-form的方法

mini云码 发布日期： 2025-11-11 23:28

axios默认是使用application/json格式进行通信。然后post协议还有form-data和application/x-www-form-urlencoded两种格式，这两种格式常见于jquery年代的表单格式，也是蛮常用的。因此我们在通信层上必须支持。

因为上面这三种格式的method都是post，因此也无法通过method来判断业务代码想要传什么格式的。因此，我们可以人工添加一些属性，在拦截器里获取这些属性而修改不同格式的header。

下面，是通过axios的拦截器支持的例子，关键的代码是通过isWWW和isFile两个自定义属性来支持。

import axios from 'axios'
import Vue from 'vue'
import qs from 'qs'
import store from '@/store'
import { MessageBox, Message, Notification, Loading } from 'element-ui'
import router from '@/router/index.js'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 30000, // request timeout
})

// request interceptor
service.interceptors.request.use(
  (config) => {
    // console.log('config',config);
    store.commit('app/SHOW_LOADING') //一个用vuex实现的全局变量，用来展示是否loadding中

    if (config.method === 'post') {
      if (config.isWWW && config.isWWW=== true) {
             config.headers.post['Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8';
            config.data = qs.stringify(config.data)
      } else if (config.isFile && config.isFile === true) {
        config.headers.post['Content-Type'] = 'multipart/form-data';

      } 
    }

    let token = sessionStorage.getItem('token')
    if (token && token !== '') {
      config.headers['token'] = token // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  (error) => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  (res) => {
    store.commit('app/HIDE_LOADING')
    const code = res.data.code

    if (code === -1) {
      sessionStorage.removeItem('token')
      router.push('/login')
    } else if (code !== 1) {
      Notification.error({
        title: res.data.msg,
		duration: 5 * 1000
      })
      return Promise.reject(res.data)
    } else {
      return res.data
    }
  },
  (error) => {
    store.commit('app/HIDE_LOADING')
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000,
    })
    return Promise.reject(error)
  }
)

export default service;

比如假如想使用application/x-www-form-urlencoded这种格式通信，业务代码可以这样调用：

import request from "../utils/request.js"


export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    isWWW:true,
    data:data,
  })
}