vue3使用axios 如何封装API模块
时间: 2024-02-11 09:58:03 浏览: 25
首先,你需要先安装axios,并在你的Vue3项目中引入它。然后你可以在你的项目中创建一些API模块来封装你的HTTP请求。
以下是一些可能用到的步骤:
1. 创建一个api目录来存放你的API模块。
2. 在该目录下创建一个api.js文件,用来定义所有的API模块。
3. 在api.js文件中,你可以定义一个axios实例,在此实例中设置一些默认选项,例如baseURL、headers等。
4. 在跟API相关的模块中引入此实例,用它来发送请求。
5. 在每个API模块中定义一个方法,并在其内部使用axios实例发送请求到你的后端服务器。
以下是示例代码:
```javascript
// api.js
import axios from 'axios'
const api = axios.create({
baseURL: 'http://api.example.com',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
})
export default api
// user.js
import api from './api'
export function getUser (userId) {
return api.get(`/user/${userId}`)
}
// post.js
import api from './api'
export function createPost (postData) {
return api.post('/post', postData)
}
```
这种方式可以让你更好地管理你的API请求,可以在一个地方修改基础url,也可以添加axios的拦截器等。在每个单独的API模块中,你可以封装相应方法,并在需要的地方调用它们。