vue 3项目axios封装

Vue 3项目中，Axios是一个常用的HTTP客户端库，用于在浏览器和Node.js环境中发送AJAX请求。为了提高代码复用性和组织结构，通常会将 Axios 的基本操作进行封装。以下是创建一个简单的 Axios 封装示例：

1. 首先，安装 Axios 和 Axios Promise 实现插件，如果还没安装的话：

npm install axios axios-promise

2. 创建一个名为 `axios.js` 或者类似名称的文件，在这个文件中编写封装函数：

import axios from 'axios';
import axiosPromise from 'axios-promise';

// 全局配置 Axios (如设置基础URL、全局拦截器等)
axios.interceptors.request.use(config => {
  // 添加你的全局请求前处理逻辑
  return config;
}, error => {
  // 拦截器错误处理
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 处理响应成功
  return response.data;
}, error => {
  // 处理响应失败
  return Promise.reject(error);
});

// 创建封装后的实例，提供统一的方法供组件调用
const service = axiosPromise(axios.create({
  baseURL: process.env.VUE_APP_API_URL, // API 地址，默认值可根据需求更改
  timeout: 5000, // 请求超时时间
  headers: { 'Content-Type': 'application/json' },
}));

export default service;

3. 在 Vue 组件中引入并使用封装后的 `service`：

import axiosService from '@/utils/axios';

export default {
  async fetchData() {
    try {
      const response = await axiosService.get('/api/data');
      console.log(response); // 调用API获取数据
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
};