vue3封装Axios库的 API 请求并使用拦截器来处理请求和响应

目录

为什么添加封装该部分？

具体代码：

对代码的解释：

如何使用？

---

为什么添加封装该部分？

• 简化发送 HTTP 请求的流程
• 提供统一的错误处理机制
• 支持用户状态管理和鉴权
• 具备良好的扩展性和灵活性
• 提高开发效率并使得代码更加整洁和易于维护

具体代码：

import axios from 'axios'
import { ElMessage } from 'element-plus'// 从存储的用户模块中导入useUserStore钩子函数。
import useUserStore from '@/store/modules/user'// 使用axios库创建一个名为api的实例，用于发送HTTP请求
const api = axios.create({baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,timeout: 1000 * 60,responseType: 'json',
})api.interceptors.request.use((request) => {const userStore = useUserStore()/*** 全局拦截请求发送前提交的参数* 以下代码为示例，在请求头里带上 token 信息*/if (userStore.isLogin && request.headers) {request.headers.Token = userStore.token}// 是否将 POST 请求参数进行字符串化处理if (request.method === 'post') {// request.data = qs.stringify(request.data, {//   arrayFormat: 'brackets',// })}return request},
)api.interceptors.response.use((response) => {/*** 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示* 假设返回数据格式为：{ status: 1, error: '', data: '' }* 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录* 请求出错时 error 会返回错误信息*/if (response.data.status === 1) {if (response.data.error !== '') {// 这里做错误提示，如果使用了 element plus 则可以使用 Message 进行提示// ElMessage.error(options)return Promise.reject(response.data)}}else {useUserStore().logout()}return Promise.resolve(response.data)},(error) => {let message = error.messageif (message === 'Network Error') {message = '后端网络故障'}else if (message.includes('timeout')) {message = '接口请求超时'}else if (message.includes('Request failed with status code')) {message = `接口${message.substr(message.length - 3)}异常`}ElMessage({message,type: 'error',})return Promise.reject(error)},
)export default api

对代码的解释：

1. 引入了所需的库和模块：

   • axios：用于发送 HTTP 请求。
   • ElMessage：来自 Element Plus 的消息提示组件。

2. 导入 useUserStore 钩子函数，该函数用于从存储的用户模块中获取用户状态和 token。

3. 创建了一个名为 api 的 axios 实例，用于发送 HTTP 请求。在创建实例时，根据环境变量设置了基本 URL 和超时时间。

4. 使用 api.interceptors.request.use() 方法注册了一个请求拦截器，在请求发送前执行一些操作。具体如下：

   • 获取用户状态和 token，如果用户已登录且请求头存在，则将 token 添加到请求头中。
   • 对于 POST 请求，可以选择对请求参数进行字符串化处理（此部分代码被注释掉）。

5. 使用 api.interceptors.response.use() 方法注册了一个响应拦截器，在请求返回后进行处理。具体如下：

   • 判断响应数据的状态码，如果为 1，表示请求成功；否则，视为错误。
   • 如果有错误信息，则进行全局的错误提示（示例代码中使用了 Element Plus 的 ElMessage.error() 方法）。
   • 如果状态码不为 1，调用 useUserStore().logout() 方法以注销用户。

6. 在响应拦截器中使用 Promise.resolve() 返回处理后的数据，或使用 Promise.reject() 返回错误信息。

7. 在响应拦截器的错误回调中进行了一些错误信息的处理和提示，包括网络错误、超时错误和请求异常错误。

8. 最后，将 api 导出供其他模块使用。

如何使用？

要使用该代码模块，首先确保已安装 Axios 和 Element Plus。然后，可以在需要发送 API 请求的地方通过导入 api 模块来使用它，例如：

import api from '@/path/to/api'// 发送 GET 请求
api.get('/api/endpoint').then(response => {// 处理返回的数据}).catch(error => {// 处理请求错误})// 发送 POST 请求
api.post('/api/endpoint', { key: value }).then(response => {// 处理返回的数据}).catch(error => {// 处理请求错误})

根据你的具体需求，可以调用 api 实例上的不同方法（如 get、post、put、delete 等）来发送不同类型的请求，并在 then 方法中处理成功的响应数据，在 catch 方法中处理请求错误