vue3封装axiosvue3封装axios 在 Vue 3 项目中，封装 axios 是一个常见的需求，可以提高代码的

vue3封装axios

在 Vue 3 项目中，封装 axios 是一个常见的需求，可以提高代码的可维护性和复用性。通过封装，可以统一处理请求配置、错误处理、拦截器等逻辑。以下是 Vue 3 中封装 axios 的详细步骤和示例。

安装 axios

首先，确保安装了 axios：

npm install axios

创建 axios 实例

通过创建自定义的 axios 实例，可以统一配置请求的基础 URL、超时时间、请求头等。

// src/utils/request.js
import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 基础 URL
  timeout: 10000, // 超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

export default instance;

添加请求拦截器

请求拦截器可以用于在发送请求之前统一处理逻辑，例如添加认证信息。

// src/utils/request.js
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做一些处理
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

添加响应拦截器

响应拦截器可以用于统一处理响应数据或错误。

// src/utils/request.js
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做一些处理
    return response.data;
  },
  (error) => {
    // 处理响应错误
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.error('未授权，请重新登录');
          break;
        case 404:
          console.error('请求的资源不存在');
          break;
        case 500:
          console.error('服务器内部错误');
          break;
        default:
          console.error('请求失败');
      }
    }
    return Promise.reject(error);
  }
);

封装请求方法

将常用的请求方法（如 get、post、put、delete 等）封装成统一的函数，方便调用。

// src/utils/request.js
export const get = (url, params = {}) => {
  return instance.get(url, { params });
};

export const post = (url, data = {}) => {
  return instance.post(url, data);
};

export const put = (url, data = {}) => {
  return instance.put(url, data);
};

export const del = (url) => {
  return instance.delete(url);
};

在 Vue 3 中使用封装的 axios

在组件中直接使用封装好的请求方法。

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { get } from '@/utils/request';

const items = ref([]);

const fetchData = async () => {
  try {
    const response = await get('/data');
    items.value = response;
  } catch (error) {
    console.error('请求失败', error);
  }
};
</script>

结合 TypeScript

如果使用 TypeScript，可以为请求方法和响应数据添加类型支持。

// src/utils/request.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

const instance: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers!.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 封装请求方法
export const get = <T>(url: string, params?: object): Promise<T> => {
  return instance.get(url, { params });
};

export const post = <T>(url: string, data?: object): Promise<T> => {
  return instance.post(url, data);
};

export const put = <T>(url: string, data?: object): Promise<T> => {
  return instance.put(url, data);
};

export const del = <T>(url: string): Promise<T> => {
  return instance.delete(url);
};

总结

通过封装 axios，可以实现以下目标：

统一配置：集中管理请求的基础 URL、超时时间、请求头等。
统一拦截：通过拦截器统一处理请求和响应逻辑。
简化调用：封装常用的请求方法，减少重复代码。
类型支持：结合 TypeScript 提供类型安全。

封装后的 axios 可以显著提升代码的可维护性和开发效率，是 Vue 3 项目中的最佳实践之一。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github