使用vue插件axios傳數(shù)據(jù)的Content-Type及格式問(wèn)題詳解
1.一般來(lái)說(shuō),前后臺(tái)對(duì)接,常用的Content-Type有:
application/json,application/x-www-form-urlencoded 以及 multipart/form-data,當(dāng)我們使用axios時(shí),一般不需要我們主動(dòng)去設(shè)置Content-Type,而是跟著我們傳的數(shù)據(jù)格式自動(dòng)適應(yīng)。
2.get請(qǐng)求
get請(qǐng)求時(shí)傳遞的參數(shù)是會(huì)出現(xiàn)在url里面的,我們使用aixos傳遞get請(qǐng)求時(shí)可用格式如下
(1)將參數(shù)拼接在url里
this.$axios({
method: 'get',
url: this.$store.state.api1
+ '&username=' + 'xxx'
+ '&password=' + 'xxx'
})
(2)將參數(shù)放入params對(duì)象里
this.$axios({
method: 'get',
url: this.$store.state.api1,
params: {
username: 'xxx',
password: 'xxx'
}
})3.post請(qǐng)求
(1)當(dāng)我們要傳對(duì)象時(shí),此時(shí)的 Content-Type 為 application/json 類型,傳遞的格式如下,將傳遞的參數(shù)放入對(duì)象中:
this.$axios({
url: this.$store.state.api1,
method: 'post',
data: {
username: 'xxx',
password: 'xxx'
}
})(2)當(dāng)我們要傳字符串時(shí),Content-Type 為 application/x-www-form-urlencoded 類型,傳遞的格式有如下:
this.$axios({
method: 'post',
url: this.$store.state.api1,
data: 'username=' + 'xxx'
+ '&password=' + 'xxx'
})this.$axios({
method: 'post',
url: this.$store.state.api1,
data: qs.stringify({
username: 'xxx',
password: 'xxx'
})(3)當(dāng)我們要傳文件時(shí),Content-Type 需要使用 multipart/form-data,格式如下:
// 獲取文件
let input = document.querySelector('.input_file')
let curFiles = input.files
// 將文件放入formData中
let formData = new FormData()
for(let file of curFiles){
formData.append('files', file)
}
// 將需要傳遞的參數(shù)放入formData中
formData.append('username', 'xxx')
formData.append('password', 'xxx')
// 調(diào)接口
this.$axios({
url: this.$store.state.api1,
method: 'post',
data: formData
})
到此這篇關(guān)于使用vue插件axios傳數(shù)據(jù)的Content-Type以及格式問(wèn)題的文章就介紹到這了,更多相關(guān)vue Content-Type內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
這篇文章主要介紹了vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-09-09
vue點(diǎn)擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實(shí)例
這篇文章主要介紹了vue點(diǎn)擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
關(guān)于vue3.0中的this.$router.replace({ path: ''/''})刷新無(wú)效果問(wèn)題
這篇文章主要介紹了關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無(wú)效果問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-11-11
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11

