axios的post請求方法---以Vue示例

Axios向后端提交數據的參數格式是json，而並非用的是form傳參，post表單請求提交時，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST請求如果不指定請求頭RequestHeader，默認使用的Content-Type是text/plain;charset=UTF-8。

axios 請求配置中，transformRequest配置允許在向服務器發送前，修改請求數據。

  // `transformRequest` 允許在向服務器發送前，修改請求數據
  // 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
  // 后面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) { // 對 data 進行任意轉換處理

    return data; }],

可以使用該配置修改請求參數。

參考資料：https://www.kancloud.cn/yunye/axios/234845

如下是axios的兩種方法

方法一：

this.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)

參考鏈接：https://segmentfault.com/q/1010000008462977

方法二：使用qs模塊/querystring模塊

//import qs from 'querystring'
import qs from 'qs'
//export default{  .. }
this.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'}
  })
})

此方法操作前，需要先安裝qs

npm install --save qs

參考鏈接：https://blog.csdn.net/shooke/article/details/76038967