關(guān)于vue中的ajax請(qǐng)求和axios包問(wèn)題
在vue中，經(jīng)常會(huì)用到數(shù)據(jù)請(qǐng)求，常用的有：vue-resourse、axios
今天我說(shuō)的是axios的post請(qǐng)求
github源文件及文檔地址：【https://github.com/axios/axios】
+ 首先，引入axios
CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入：import axios from 'axios';
•get請(qǐng)求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
•post請(qǐng)求
依賴于qs包，將對(duì)象轉(zhuǎn)換成以&連接的字符串
//例：
axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) {
console.log(response);
})
附錄：配置 axios
上面封裝的方法中，使用了 axios 的三個(gè)配置項(xiàng)，實(shí)際上只有 url 是必須的，完整的 api 可以參考使用說(shuō)明
為了方便，axios 還為每種方法起了別名，比如上面的 saveForm 方法等價(jià)于：
axios.post('/user', context.state.test02)
完整的請(qǐng)求還應(yīng)當(dāng)包括 .then 和 .catch
.then(function(res){
console.log(res)
})
.catch(function(err){
console.log(err)
})
當(dāng)請(qǐng)求成功時(shí)，會(huì)執(zhí)行 .then，否則執(zhí)行 .catch
這兩個(gè)回調(diào)函數(shù)都有各自獨(dú)立的作用域，如果直接在里面訪問(wèn) this，無(wú)法訪問(wèn)到 Vue 實(shí)例
這時(shí)只要添加一個(gè) .bind(this) 就能解決這個(gè)問(wèn)題
.then(function(res){
console.log(this.data)
}.bind(this))
總結(jié)
以上所述是小編給大家介紹的關(guān)于vue中的ajax請(qǐng)求和axios包問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
教你用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果
最近做的兩個(gè)項(xiàng)目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)
這篇文章主要為大家介紹了解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
SpringBoot+Vue項(xiàng)目線上買菜系統(tǒng)源碼展示
本線上買菜系統(tǒng)采用的數(shù)據(jù)庫(kù)是Mysql，使用springboot框架開發(fā)。在設(shè)計(jì)過(guò)程中，充分保證了系統(tǒng)代碼的良好可讀性、實(shí)用性、易擴(kuò)展性、通用性、便于后期維護(hù)、操作方便以及頁(yè)面簡(jiǎn)潔等特點(diǎn),需要的朋友可以參考下2022-08-08
vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼
本文主要介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue使用vue-cli創(chuàng)建項(xiàng)目
這篇文章主要介紹了Vue使用vue-cli創(chuàng)建項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
深入探索Vue中樣式綁定的七種實(shí)現(xiàn)方法
在?Vue.js?開發(fā)中,合理地控制元素的樣式對(duì)于構(gòu)建高質(zhì)量的用戶界面至關(guān)重要,Vue?提供了靈活的方式來(lái)綁定樣式,這篇文章將探索?Vue?中設(shè)置樣式的七種做法,并結(jié)合代碼,逐步說(shuō)明每種方法的實(shí)現(xiàn),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了計(jì)算屬性和偵聽器，文章以介紹計(jì)算屬性、偵聽器的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11
vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼
這篇文章主要介紹了vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼,需要的朋友可以參考下2018-11-11
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03