vben 之 axios 封装,封装axios及使用

vben是一个基于Vue 3的开源框架，它提供了对axios的封装，使得在Vue 3项目中更方便地使用axios进行HTTP请求，封装后的axios具备统一的请求和响应格式，支持请求拦截、响应拦截、取消请求等功能，使用封装后的axios，只需引入并使用即可，无需再单独配置axios实例，vben还提供了全局错误处理、请求超时等特性，使得HTTP请求更加安全和可靠，通过vben的axios封装，开发者可以更加高效地进行网络请求和数据交互。

1. 为何要封装Axios
2. vben中Axios的基础封装
3. 在组件中使用封装的Axios实例

vben之Axios封装：提升前端请求效率的优雅实践

在前端开发中,API请求管理是一个不可或缺的部分，为了更高效地处理这些请求，许多开发者会选择使用第三方库，如Axios，而vben，作为一个基于Vue 3的轻量级UI框架，其设计哲学强调组件化、可配置性和高效性，本文将深入探讨如何在vben项目中封装Axios，以优化请求管理，提升开发效率与代码质量。

为何要封装Axios

1. 统一接口：封装后，所有HTTP请求都将通过统一的接口进行，便于集中管理和维护。
2. 错误处理：统一的错误处理逻辑可以减少重复代码，提高代码的可读性和可维护性。
3. 请求/响应拦截：可以在请求发送前或响应到达后添加一些处理逻辑，如添加token验证、统一处理错误信息等。
4. 性能优化：通过缓存、合并请求等策略，减少不必要的网络请求，提升应用性能。

vben中Axios的基础封装

在vben项目中,我们可以基于官方提供的vben-request进行封装，确保已安装axios和vben-request：

npm install axios vben-request

在项目的src目录下创建一个request文件夹，并在其中创建index.js文件，用于封装Axios实例。

// src/request/index.js
import axios from 'axios';
import { vbenRequest } from 'vben-request';
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 假设基础URL在环境变量中配置
  timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，比如添加token
    const token = localStorage.getItem('token'); // 假设token存储在localStorage中
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么，比如统一处理状态码
    const res = response.data;
    if (res.code !== 0) { // 假设后端通过code表示请求状态，0表示成功
      throw new Error(res.message || 'Error');
    } else {
      return res;
    }
  },
  error => {
    // 对响应错误做些什么，比如提示错误信息
    console.error('Error:', error); // 可根据需求进行更友好的错误提示或处理
    return Promise.reject(error);
  }
);
// 使用vbenRequest包装axios实例，支持更多功能（如请求队列、缓存等）
const vbenRequest = vbenRequest(service);
export default vbenRequest;

在组件中使用封装的Axios实例

我们可以在任何组件中通过导入vbenRequest来使用封装后的Axios实例进行API请求了。

<template>
  <div>Data: {{ data }}</div>
</template>
<script>
import vbenRequest from '@/request'; // 假设request文件夹位于src根目录下
import { ref } from 'vue'; // Vue 3的Composition API需要引入ref函数来定义响应式数据
export default {
  setup() {
    const data = ref(null); // 定义响应式变量来存储数据
    const fetchData = async () => { // 定义获取数据的函数，使用async/await来处理异步请求
      try {
        const response = await vbenRequest.get('/api/data'); // 发起GET请求获取数据，URL根据实际情况替换为正确的API路径
        data.value = response; // 将获取到的数据赋值给data变量（注意：这里使用了ref的value属性来更新响应式数据）
      } catch (error) { // 捕获并处理可能的错误情况（如网络错误、状态码非0等）} } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } { /script> /script> /script> /script> /script> /script> /script> /script> /script> /script> /script> /script> /script>