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