Vue axios封装

Vue axios 是一个方便的库，它可以让我们在 Vue 应用中进行 HTTP 请求。为了方便起见，我们可以将 axios 进行封装，以便在整个应用程序中重用。以下是一个简单的封装示例：

创建一个 axios 实例

import axios from 'axios'

const instance = axios.create({
baseURL: 'http://example.com/api'
})

export default instance
登录后复制

创建一个 API 模块

import axios from '@/utils/axios'

export const getUsers = () => {
return axios.get('/users')
}

export const getUser = (id) => {
return axios.get(`/users/${id}`)
}

export const createUser = (user) => {
return axios.post('/users', user)
}

export const updateUser = (id, user) => {
return axios.put(`/users/${id}`, user)
}

export const deleteUser = (id) => {
return axios.delete(`/users/${id}`)
}
登录后复制

在组件中使用 API

import { getUsers } from '@/api/users'

export default {
data() {
return {
users: []
}
},
mounted() {
getUsers()
.then(response => {
this.users = response.data
})
.catch(error => {
console.log(error)
})
}
}
登录后复制
这样，我们可以将所有的 API 调用都集中在一个地方，并且可以在整个应用程序中重复使用它们。