vue封装axios

Vue封装Axios可以提高项目的代码重用性和可维护性，以下是一个简单的示例：

1. 安装Axios

npm install axios --save

2. 创建src/api目录，并在其中创建index.js文件

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
})

service.interceptors.request.use(
  config => {
    // 在请求发送之前，对请求进行一些配置处理
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    // 对响应数据进行处理
    const res = response.data
    if (res.code !== 200) {
      console.error(res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

在上面的代码中，我们使用Axios的create方法创建了一个实例，并添加了请求和响应的拦截器。在请求拦截器中，我们可以对请求进行配置处理，如添加请求头、修改请求参数等。在响应拦截器中，我们可以对响应数据进行处理，如根据返回的code值判断请求是否成功等。

3. 在组件中使用封装好的Axios

import api from '@/api'

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

在上面的代码中，我们通过import语句引入封装好的Axios实例，并在fetchData方法中使用该实例发送请求。由于我们在封装Axios时添加了拦截器，所以我们可以对请求和响应进行统一处理，使得我们在组件中的代码更加简洁和易于维护。