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.message
    if (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 方法中处理请求错误