使用vue插件axios傳數(shù)據(jù)的Content-Type及格式問題詳解
1.一般來說,前后臺(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以及格式問題的文章就介紹到這了,更多相關(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-09vue點(diǎn)擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實(shí)例
這篇文章主要介紹了vue點(diǎn)擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11關(guān)于vue3.0中的this.$router.replace({ path: ''/''})刷新無效果問題
這篇文章主要介紹了關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-11-11VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11