axios挂在vue原型上

axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js的异步请求。在Vue中使用axios可以方便地发送HTTP请求并处理响应。为了在Vue中全局使用axios，我们可以将它挂载到Vue的原型上。

在项目中安装axios。可以使用npm或者yarn进行安装，命令如下：

bash

npm install axios

或者

bash

yarn add axios

安装完成后，在Vue的入口文件（一般是main.js）中引入axios并将其挂载到Vue的原型上。这样就可以在整个项目中通过this.$axios来使用axios。

import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios

现在，我们可以在Vue组件中使用this.$axios来发送HTTP请求。比如，我们可以发送一个GET请求获取用户信息：

export default {
  mounted() {
    this.$axios.get('/api/user')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

在上面的示例中，我们通过this.$axios.get方法发送了一个GET请求，并传入了请求的URL。然后使用Promise的then方法处理响应成功的情况，将响应的数据打印到控制台。如果请求失败，我们使用catch方法捕获错误并打印错误信息。

除了get方法，axios还提供了其他常用的方法，如post、put、delete等，可以根据需要选择合适的方法发送请求。

axios还支持拦截器，可以在请求被发送或响应被接收之前对其进行拦截和处理。比如，我们可以在请求发送前添加请求头，或在响应接收后对响应数据进行处理。下面是一个使用拦截器的示例：

// 添加请求拦截器
this.$axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + getToken()
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})
// 添加响应拦截器
this.$axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error)
})

在上面的示例中，我们使用interceptors属性来添加请求拦截器和响应拦截器。请求拦截器可以在请求被发送之前对其进行处理，比如添加请求头。响应拦截器可以在接收到响应后对其进行处理，比如对响应数据进行格式化。

总结一下，通过将axios挂载到Vue的原型上，我们可以在整个项目中方便地使用this.$axios来发送HTTP请求，并且可以使用拦截器对请求和响应进行处理。这样可以提高开发效率，简化代码逻辑。axios还提供了丰富的配置选项和方法，可以根据需求进行灵活的配置和使用。