帮我写一个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方法来处理它。