帮我写一个vue 的axios的封装

以下是一个简单的Vue Axios封装示例：

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

export default {
  get (url, params = {}) {
    return axiosInstance.get(url, { params })
      .then(response => response.data)
      .catch(error => Promise.reject(error))
  },

  post (url, data = {}) {
    return axiosInstance.post(url, data)
      .then(response => response.data)
      .catch(error => Promise.reject(error))
  },

  put (url, data = {}) {
    return axiosInstance.put(url, data)
      .then(response => response.data)
      .catch(error => Promise.reject(error))
  },

  delete (url) {
    return axiosInstance.delete(url)
      .then(response => response.data)
      .catch(error => Promise.reject(error))
  }
}

在这个示例中，我们使用Axios.create方法创建了一个可重用的Axios实例，并将其导出为一个对象。我们定义了四个方法：get、post、put和delete，它们都使用Axios实例来发出请求。

每个方法都接受一个URL和一个可选的参数对象，然后使用Axios实例发出请求并返回响应数据。如果出现错误，我们使用Promise.reject将其传递给调用方以进行处理。

使用这个封装后，你可以在Vue组件中使用这些方法来发出HTTP请求，例如：

import api from './api'

export default {
  methods: {
    fetchData () {
      api.get('/data')
        .then(data => {
          // 处理数据
        })
        .catch(error => {
          // 处理错误
        })
    }
  }
}

这个示例演示了如何使用我们的封装来获取数据。我们导入api对象，并使用get方法向服务器发出请求。当我们成功接收到响应时，我们处理数据。如果出现错误，我们使用catch方法来处理它。