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