Vue axios和vueaxios的关系及使用区别【vue基础】

目录

• axios和vue-axios的关系/区别
• axios和vue-axios的使用方式区别
• 1、axios使用方式
• 2、vue-axios使用方式
• axios和vue-axios的使用哪一种较好
• vue-axios-plugin插件的使用

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);
});

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)
})

#第一步：首先通过 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),
  // 响应拦截处理
  resHandleFunc: respOnse=> response,
  resErrorFunc: error => Promise.reject(error)
})
#第三步：使用案例
#在 Vue 组件上添加了 $http 属性, 它默认提供 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)
})