vue進(jìn)行post和get請求實(shí)例講解
更新時(shí)間：2022年03月08日 09:24:27 作者：程序猿-張益達(dá)
這篇文章主要介紹了vue進(jìn)行post和get請求實(shí)例講解，違章圍繞post和get請求的相關(guān)資料展開詳細(xì)內(nèi)容，具有一的的參考價(jià)值，需要的小伙伴可以參考一下
使用axios：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
一、基本使用方法
1、get請求
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
?.then(function (response) {
? console.log(response);
?})
?.catch(function (error) {
? console.log(error);
?});
?
// Optionally the request above could also be done as
axios.get('/user', {
? params: {
? ?ID: 12345
? }
?})
?.then(function (response) {
? console.log(response);
?})
?.catch(function (error) {
? console.log(error);
?});2.Post請求
axios.post('/user', {
?firstName: 'Fred',
?lastName: 'Flintstone'
})
.then(function (response) {
?console.log(response);
})
.catch(function (error) {
?console.log(error);
});簡單示例：
// 在進(jìn)行 post 和 get 請求的時(shí)候，使用 axios 進(jìn)行訪問
// 進(jìn)行 get 請求
axios.get(url).then(function (response){
? ? console.log(response);
}).catch(function(error){
? ? console.log(error);
});
// 進(jìn)行post 請求 ? ? ? ? ? ?
axios.post(url,{firstName:'Fred',lastName:'Flintstone'}).then(function (response) {
? ? console.log(response);
}).catch(function (error) {
? ? console.log(error);
});這樣發(fā)送請求，雖然是可以發(fā)送，但是攜帶的參數(shù)，是一個(gè)json字符串，會(huì)出現(xiàn)問題。所以我們在用post發(fā)送請求的時(shí)候，需要這樣：
axios({ ?
? ? method:'post', ?
? ? url:url, ?
? ? data:{title:this.title,content:this.content}, ?
? ? headers:{'Content-Type': 'application/x-www-form-urlencoded'}, ?
? ? transformRequest: function(obj) { ?
? ? ? ? var str = []; ?
? ? ? ? for(var p in obj){ ?
? ? ? ? ? ? str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); ?
? ? ? ? } ?
? ? ? ? return str.join("&"); ?
? ? } ?
}).then((res)=>{
? ? console.log(res.data);
});
上面這種只能提交一些簡單的數(shù)據(jù)，對于復(fù)雜的數(shù)據(jù)，可以考慮使用 QS 對數(shù)據(jù)進(jìn)行處理。
使用方法，如果找不到QS文件，可以只用 npm 安裝：
npm install qs
下載這個(gè)文件之后，使用 script 標(biāo)簽正常引入即可。
使用方法：
var formData = Qs.stringify({imgIds: [48,49],});
axios.post(url,Qs.stringify(this.formData)).then(function (response) {
? ? console.log(response);
}).catch(function (error) {
? ? console.log(error);
});或者是：
axios({
? ? method: 'post',
? ? url:url,
? ? data:Qs.stringify(this.formData),
}).then((res)=>{
? ? console.log(res);
});到此這篇關(guān)于vue進(jìn)行post和get請求實(shí)例講解的文章就介紹到這了,更多相關(guān)vue進(jìn)行post和get請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在最近一個(gè)項(xiàng)目的后臺管理系統(tǒng)中，寫前端界面時(shí)用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細(xì)的介紹一下2021-09-09
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場景——分頁/無限加載，以及編寫過程中自己的錯(cuò)誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。2016-10-10
Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue實(shí)現(xiàn)簡單實(shí)時(shí)匯率計(jì)算功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單實(shí)時(shí)匯率計(jì)算功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
ElementUI的this.$notify.close()調(diào)用不起作用的解決
本文主要介紹了ElementUI的this.$notify.close()調(diào)用不起作用的解決，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
petite-vue 是為漸進(jìn)增強(qiáng)而優(yōu)化的另一種 Vue 發(fā)行版,它提供與標(biāo)準(zhǔn) Vue 相同的模板語法和反應(yīng)性心智模型,這篇文章主要介紹了petite vue 基本使用指南,需要的朋友可以參考下2024-07-07
Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法
這篇文章主要介紹了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法,結(jié)合實(shí)例形式分析了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯(不使用v-if、v-else)
這篇文章主要給大家介紹了關(guān)于如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯的相關(guān)資料,不使用v-if、v-else,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了webpack搭建vue 項(xiàng)目的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12