使用vue插件axios傳數(shù)據(jù)的Content-Type及格式問題詳解
1.一般來說,前后臺對接,常用的Content-Type有:
application/json,application/x-www-form-urlencoded 以及 multipart/form-data,當我們使用axios時,一般不需要我們主動去設置Content-Type,而是跟著我們傳的數(shù)據(jù)格式自動適應。
2.get請求
get請求時傳遞的參數(shù)是會出現(xiàn)在url里面的,我們使用aixos傳遞get請求時可用格式如下
(1)將參數(shù)拼接在url里
this.$axios({
method: 'get',
url: this.$store.state.api1
+ '&username=' + 'xxx'
+ '&password=' + 'xxx'
})
(2)將參數(shù)放入params對象里
this.$axios({
method: 'get',
url: this.$store.state.api1,
params: {
username: 'xxx',
password: 'xxx'
}
})3.post請求
(1)當我們要傳對象時,此時的 Content-Type 為 application/json 類型,傳遞的格式如下,將傳遞的參數(shù)放入對象中:
this.$axios({
url: this.$store.state.api1,
method: 'post',
data: {
username: 'xxx',
password: 'xxx'
}
})(2)當我們要傳字符串時,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)當我們要傳文件時,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')
// 調接口
this.$axios({
url: this.$store.state.api1,
method: 'post',
data: formData
})
到此這篇關于使用vue插件axios傳數(shù)據(jù)的Content-Type以及格式問題的文章就介紹到這了,更多相關vue Content-Type內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue+elementUI 實現(xiàn)內容區(qū)域高度自適應的示例
這篇文章主要介紹了vue+elementUI 實現(xiàn)內容區(qū)域高度自適應的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-09-09
關于vue3.0中的this.$router.replace({ path: ''/''})刷新無效果問題
這篇文章主要介紹了關于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼,非常具有實用價值,需要的朋友可以參考下2017-11-11
VUE前端從后臺請求過來的數(shù)據(jù)進行轉換數(shù)據(jù)結構操作
VUE前端從后臺請求過來的數(shù)據(jù)進行轉換數(shù)據(jù)結構操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11

