欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?axios和vue-axios的關(guān)系及使用區(qū)別

 更新時(shí)間:2022年08月04日 14:16:09   作者:張童瑤  
axios是基于promise的HTTP庫(kù),可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios, axios),本文給大家介紹Vue?axios和vue-axios關(guān)系,感興趣的朋友一起看看吧

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-axiosaxios集成到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)過程

    在項(xiàng)目中封裝axios的實(shí)戰(zhàn)過程

    這篇文章主要給大家介紹了關(guān)于如何在項(xiàng)目中封裝axios的相關(guān)資料,axios 請(qǐng)求的封裝,無非是為了方便代碼管理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-09-09
  • 傳說中VUE的語法糖到底是做什么的

    傳說中VUE的語法糖到底是做什么的

    從接觸Vue我們就知道 v-model是實(shí)現(xiàn)數(shù)據(jù)雙向綁定的那他能實(shí)現(xiàn)綁定的原理到底是啥?最常見的語法糖 v-model,今天通過案例給大家詳細(xì)介紹下,需要的朋友參考下吧
    2021-09-09
  • Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式

    Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式

    這篇文章主要介紹了Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中報(bào)錯(cuò)Duplicate?keys?detected:'1'.?This?may?cause?an?update?error的解決方法

    vue中報(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-03
  • vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法

    vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法

    這篇文章主要介紹了vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue跳轉(zhuǎn)到詳情頁的兩種實(shí)現(xiàn)方法

    vue跳轉(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-06
  • vue3在router中使用store報(bào)錯(cuò)的完美解決方案

    vue3在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-11
  • vue3組件式彈窗打開的3種方式小結(jié)

    vue3組件式彈窗打開的3種方式小結(jié)

    這篇文章主要給大家介紹了關(guān)于vue3組件式彈窗打開的3種方式,彈窗組件是常見的交互組件,它能夠彈出一些提示信息、提醒用戶進(jìn)行操作等等,需要的朋友可以參考下
    2023-07-07
  • vue前端框架vueuse的useScroll函數(shù)使用源碼分析

    vue前端框架vueuse的useScroll函數(shù)使用源碼分析

    這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • vue服務(wù)端渲染緩存應(yīng)用詳解

    vue服務(wù)端渲染緩存應(yīng)用詳解

    vue緩存分為頁面緩存、組建緩存、接口緩存,這里我主要說到了頁面緩存和組建緩存。接下來通過本文給大家介紹vue服務(wù)端渲染緩存應(yīng)用 ,需要的朋友可以參考下
    2018-09-09

最新評(píng)論