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

更新時(shí)間：2022年08月04日 14:16:09 作者：張童瑤

axios是基于promise的HTTP庫，可以使用在瀏覽器和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庫，可以使用在瀏覽器和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í)我們基本都會需要配置axios的攔截器，對axios的請求、響應(yīng)進(jìn)行二次封裝，會多一道工作。作為一名程序員，切記不要重復(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, {
  // 第二步：請求攔截處理
  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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: