Vue3如何封装Axios

在现代前端开发中，Axios 是一个非常流行的 HTTP 客户端库，用于发送异步请求。在 Vue3 项目中，我们通常会将 Axios 进行封装，以便更好地管理请求、统一处理错误、添加拦截器等。本文将介绍如何在 Vue3 中封装 Axios，并提供一个完整的示例。

1. 安装Axios

首先，我们需要在项目中安装 Axios。可以通过 npm 或 yarn 进行安装：

npm install axios
# 或者
yarn add axios

2. 创建Axios实例

为了更好地管理请求，我们可以创建一个 Axios 实例，并对其进行配置。通常我们会将 Axios 实例放在一个单独的文件中，例如 src/utils/request.js。

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置基础URL
  timeout: 5000, // 请求超时时间
});

export default service;

3. 添加请求拦截器

在发送请求之前，我们可能需要对请求进行一些处理，例如添加 token、设置请求头等。我们可以通过 Axios 的请求拦截器来实现。

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

4. 添加响应拦截器

在接收到响应后，我们可能需要对响应数据进行处理，例如统一处理错误、解析数据等。我们可以通过 Axios 的响应拦截器来实现。

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    const res = response.data;
    if (res.code !== 200) {
      // 处理业务错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

5. 封装请求方法

为了更方便地使用 Axios，我们可以封装一些常用的请求方法，例如 get、post、put、delete 等。

// 封装get请求
export function get(url, params) {
  return service({
    url,
    method: 'get',
    params,
  });
}

// 封装post请求
export function post(url, data) {
  return service({
    url,
    method: 'post',
    data,
  });
}

// 封装put请求
export function put(url, data) {
  return service({
    url,
    method: 'put',
    data,
  });
}

// 封装delete请求
export function del(url, params) {
  return service({
    url,
    method: 'delete',
    params,
  });
}

6. 在Vue3中使用封装的Axios

在 Vue3 中，我们可以通过 provide 和 inject 来全局注入 Axios 实例，或者在组件中直接使用封装的请求方法。

import { provide } from 'vue';
import service from '@/utils/request';

export default {
  setup() {
    provide('axios', service);
  },
};

在组件中使用：

import { inject } from 'vue';

export default {
  setup() {
    const axios = inject('axios');

    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      fetchData,
    };
  },
};

7. 总结

通过以上步骤，我们成功地在 Vue3 项目中封装了 Axios，并实现了请求拦截器、响应拦截器以及常用的请求方法。这样不仅提高了代码的可维护性，还能更好地处理请求和响应中的各种情况。

在实际项目中，你可以根据需求进一步扩展和优化这个封装，例如添加更多的请求方法、处理不同的错误码、添加请求缓存等。希望本文对你有所帮助！