存档2020年3月14日

axios发送post请求，将数据以表单形式提交

axios 请求配置中，transformRequest配置允许在向服务器发送前，修改请求数据。
// transformRequest 允许在向服务器发送前，修改请求数据
// 只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream

  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

处理方法一：

axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
或可以在main.js中进行配置
// main.js
import Axios from 'axios'
import VueAxios from 'vue-axios'
const MyAxios = Axios.create({
  transformRequest: [function (data) {
    // 将数据转换为表单数据
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
Vue.use(VueAxios, MyAxios)

处理方法二：使用qs模块

先安装qs模块 npm install --save qs
axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  transformRequest: [function (data) {
    data = Qs.stringify(data);
    return data;
  }],
  headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
})