axios 默認(rèn)是 Payload 格式數(shù)據(jù)請求，但有時(shí)候后端接收參數(shù)要求必須是 Form Data 格式的掷倔，所以我們就得進(jìn)行轉(zhuǎn)換。Payload 和 Form Data 的主要設(shè)置是根據(jù)請求頭的 Content-Type 的值來的勒葱。
Payload Content-Type: 'application/json; charset=utf-8'
Form Data Content-Type: 'application/x-www-form-urlencoded'
一、設(shè)置單個(gè)的POST請求為 Form Data 格式
axios({
method: 'post',
url: 'http://localhost:8080/login',
data: {
username: this.loginForm.username,
password: this.loginForm.password
},
transformRequest: [
function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
ret = ret.substring(0, ret.lastIndexOf('&'));
return ret
}
],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
主要配置兩個(gè)地方凛虽，transformRequest 方法進(jìn)行數(shù)據(jù)格式轉(zhuǎn)換， Content-Type 值改為 'application/x-www-form-urlencoded'
二凯旋、全局設(shè)置POST請求為 Form Data 格式
因?yàn)橄裆厦婺菢用總€(gè)請求都要配置 transformRequest 和 Content-Type 非常的麻煩，重復(fù)性代碼也很丑陋瓦阐，所以通常都會進(jìn)行全局設(shè)置。具體代碼如下
import axios from 'axios'
import qs from 'qs'
// 實(shí)例對象
let instance = axios.create({
timeout: 6000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 請求攔截器
instance.interceptors.request.use(
config => {
config.data = qs.stringify(config.data) // 轉(zhuǎn)為formdata數(shù)據(jù)格式
return config
},
error => Promise.error(error)
)
就是我們在封裝 axios 的時(shí)候睡蟋，設(shè)置請求頭 Content-Type 為 application/x-www-form-urlencoded。 然后在請求攔截器中戳杀，通過 qs.stringify() 進(jìn)行數(shù)據(jù)格式轉(zhuǎn)換，這樣每次發(fā)送的POST請求都是 Form Data 格式的數(shù)據(jù)了信卡。 其中 qs 模塊是安裝 axios 模塊的時(shí)候就有的隔缀，不用另行安裝傍菇，通過 import 引入即可使用猾瘸。
