axios配置vue

axios是一个基于Promise的HTTP客户端，用于发送HTTP请求并处理响应。在Vue项目中使用axios可以方便地与后端进行数据交互。

我们需要在Vue项目中安装axios。可以使用npm或者yarn来安装axios，具体命令如下：

shell

npm install axios

或者

shell

yarn add axios

安装完成后，我们需要在Vue项目中引入axios。可以在main.js中全局引入axios，这样在所有组件中都可以直接使用axios。

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

接下来，我们可以在Vue组件中使用axios发送HTTP请求。axios提供了多种方法来发送不同类型的请求，例如GET、POST、PUT、DELETE等。

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

在上面的示例代码中，我们使用了axios的`get`方法发送了一个GET请求，请求的URL是`/api/data`。当请求成功时，会执行`then`方法中的回调函数，可以在回调函数中处理返回的数据。当请求失败时，会执行`catch`方法中的回调函数，可以在回调函数中处理错误信息。

除了`get`方法，axios还提供了`post`、`put`、`delete`等方法来发送不同类型的请求。这些方法的使用方式类似，只需要将请求类型作为方法名即可。

export default {
  methods: {
    postData() {
      this.$axios.post('/api/data', { name: 'Alice', age: 20 })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}

在上面的示例代码中，我们使用了axios的`post`方法发送了一个POST请求，请求的URL是`/api/data`，请求的数据是一个对象`{ name: 'Alice', age: 20 }`。同样地，我们可以在`then`方法和`catch`方法中处理请求的结果和错误信息。

除了基本的请求方法，axios还提供了一些其他的功能，例如设置请求头、设置请求超时时间、处理请求和响应的拦截器等。这些功能可以通过axios的配置来实现。

import axios from 'axios'
// 设置请求超时时间为5秒
axios.defaults.timeout = 5000
// 设置请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token'
// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做一些处理
  return config
}, error => {
  // 对请求错误做处理
  return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做处理
  return response
}, error => {
  // 对响应错误做处理
  return Promise.reject(error)
})
Vue.prototype.$axios = axios

在上面的示例代码中，我们通过`axios.defaults`来设置了请求超时时间和请求头。通过`axios.interceptors.request.use`和`axios.interceptors.response.use`来设置了请求和响应的拦截器。请求拦截器可以在发送请求之前对请求进行处理，例如添加请求头、修改请求参数等。响应拦截器可以在接收到响应之后对响应进行处理，例如处理响应数据、处理错误信息等。

通过以上的配置，我们可以更加灵活地使用axios来发送HTTP请求，并对请求和响应进行处理。axios还支持取消请求、并发请求、上传和下载文件等功能，可以根据具体需求进一步学习和使用。