Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios和vue-axios的關(guān)系/區(qū)別
1、axios
是基于promise的HTTP庫(kù),可以使用在瀏覽器和node.js
中,它不是vue的第三方插件
2、axios
使用的時(shí)候不能像vue的插件(如:Vue-Router、VueX等)通過Vue.use()
安裝插件,需要在原型上進(jìn)行綁定使用:Vue.prototype.$http = axios;
3、vue-axios
是axios
集成到Vue.js
的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios, axios);
axios和vue-axios的使用方式區(qū)別
1、axios使用方式
npm install --save axios
# 在入口文件main.js中配置 import Vue from 'vue' import axios from 'axios' Vue.prototype.$http = axios # 第三步:使用案例 this.$http.get('/user?id=666').then((response) => { console.log(response.data) }).catch( (error) => { console.log(error); });
2、vue-axios使用方式
npm install --save vue-axios # 或者 npm install --save axios vue-axios
#在入口文件main.js中配置 import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) #第三步:使用方式有如下三種 #方式1 Vue.axios.get(api).then((response) => { console.log(response.data) }) #方式2 this.axios.get(api).then((response) => { console.log(response.data) }) #方式3 this.$http.get(api).then((response) => { console.log(response.data) })
axios和vue-axios的使用哪一種較好
使用 Vue 的插件寫法,更符合 Vue 整體生態(tài)環(huán)境。而直接寫原型鏈,感覺有些粗暴了,除非是很底層的實(shí)現(xiàn),否則不太推薦這樣寫了。因此,我們更推薦使用vue-axios
插件的方式,不太推薦是直接使用axios
的方式。
vue-axios-plugin插件的使用
在使用axios或vue-axios時(shí)我們基本都會(huì)需要配置axios的攔截器,對(duì)axios的請(qǐng)求、響應(yīng)進(jìn)行二次封裝, 會(huì)多一道工作。作為一名程序員,切記不要重復(fù)造輪子。在vue項(xiàng)目當(dāng)中,可以使用vue-axios-plugin
插件。使用步驟如下:
#第一步:首先通過 npm 安裝 npm install --save vue-axios-plugin #然后在main.js入口文件配置如下: mport Vue from 'Vue' import VueAxiosPlugin from 'vue-axios-plugin' Vue.use(VueAxiosPlugin, { // 第二步:請(qǐng)求攔截處理 reqHandleFunc: config => config, reqErrorFunc: error => Promise.reject(error), // 響應(yīng)攔截處理 resHandleFunc: response => response, resErrorFunc: error => Promise.reject(error) }) #第三步:使用案例 #在 Vue 組件上添加了 $http 屬性, 它默認(rèn)提供 get 和 post 方法,使用如下 this.$http.get(url, data, options).then((response) => { console.log(response) }) this.$http.post(url, data, options).then((response) => { console.log(response) }) #你也可以通過 this.$axios 來使用 axios 所有的 api 方法,比如: this.$axios.get(url, data, options).then((response) => { console.log(response) }) this.$axios.post(url, data, options).then((response) => { console.log(response) })
axios插件文檔:http://www.axios-js.com/zh-cn/docs/vue-axios-plugin.html
到此這篇關(guān)于Vue axios和vue-axios的關(guān)系及使用區(qū)別的文章就介紹到這了,更多相關(guān)Vue axios和vue-axios關(guān)系內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在項(xiàng)目中封裝axios的實(shí)戰(zhàn)過程
這篇文章主要給大家介紹了關(guān)于如何在項(xiàng)目中封裝axios的相關(guān)資料,axios 請(qǐng)求的封裝,無非是為了方便代碼管理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式
這篇文章主要介紹了Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue中報(bào)錯(cuò)Duplicate?keys?detected:'1'.?This?may?c
我們?cè)趘ue開發(fā)過程中常會(huì)遇到一些錯(cuò)誤,這篇文章主要給大家介紹了關(guān)于vue中報(bào)錯(cuò)Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue跳轉(zhuǎn)到詳情頁的兩種實(shí)現(xiàn)方法
最近接觸了vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)到詳情頁的兩種實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06vue3在router中使用store報(bào)錯(cuò)的完美解決方案
這篇文章主要介紹了vue3在router中使用store報(bào)錯(cuò)解決方案,就是需要在實(shí)例化一下,因?yàn)樵诰幾grouter的時(shí)候pinia還未被實(shí)例化,文中補(bǔ)充介紹了vue3中router和store詳細(xì)使用教程方法,感興趣的朋友一起看看吧2023-11-11vue前端框架vueuse的useScroll函數(shù)使用源碼分析
這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08