使用vue插件axios傳數據的Content-Type及格式問題詳解
更新時間：2022年09月16日 14:26:35 作者：東之健大壞蛋
這篇文章主要介紹了使用vue插件axios傳數據的Content-Type以及格式問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1.一般來說，前后臺對接，常用的Content-Type有：
application/json，application/x-www-form-urlencoded 以及 multipart/form-data，當我們使用axios時，一般不需要我們主動去設置Content-Type，而是跟著我們傳的數據格式自動適應。
2.get請求
get請求時傳遞的參數是會出現在url里面的，我們使用aixos傳遞get請求時可用格式如下
（1）將參數拼接在url里
this.$axios({
method: 'get',
url: this.$store.state.api1
+ '&username=' + 'xxx'
+ '&password=' + 'xxx'
})
（2）將參數放入params對象里
this.$axios({
method: 'get',
url: this.$store.state.api1,
params: {
username: 'xxx',
password: 'xxx'
}
})3.post請求
（1）當我們要傳對象時，此時的 Content-Type 為 application/json 類型，傳遞的格式如下，將傳遞的參數放入對象中：
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)
}
// 將需要傳遞的參數放入formData中
formData.append('username', 'xxx')
formData.append('password', 'xxx')
// 調接口
this.$axios({
url: this.$store.state.api1,
method: 'post',
data: formData
})
到此這篇關于使用vue插件axios傳數據的Content-Type以及格式問題的文章就介紹到這了,更多相關vue Content-Type內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue項目使用微信公眾號支付總結，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了解決vue項目axios每次請求session不一致的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了Vitepress的文檔渲染基礎教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章介紹了Vue中的生命周期，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue踩坑記錄之src的動態(tài)綁定賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
最近碰到vue項目打包上線后,第一次打開首頁后會出現空白、加載時間過長的情況,下面這篇文章主要給大家介紹了關于vue項目首屏加載過慢的一些解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
我們在開發(fā)的時候會經常用的導出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關于Vue前端表格導出Excel文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
使用vue根據狀態(tài)添加列表數據和刪除列表數據的實例
今天小編就為大家分享一篇使用vue根據狀態(tài)添加列表數據和刪除列表數據的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue清空form對象的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解
這篇文章主要介紹了Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載,項目較大路由較多時，路由拆分是一個不錯的代碼優(yōu)化方案，按不同業(yè)務分為多個模塊，結構清晰便于統(tǒng)一管理，本文通過示例給大家詳細講解，需要的朋友可以參考下2022-11-11