axios傳送post請求,將資料以表單形式提交
阿新 • • 發佈:2019-01-28
在使用vue以及axios的過程中,需要將資料以表單形式提交給後臺,現在總結一下處理方法。
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模組
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