vue3 如何封装aixos

news2025/1/4 6:53:57

封装 Axios 可以帮助我们更好地管理 HTTP 请求，例如添加统一的基础 URL、请求头、拦截器等功能。
下面是封装 Axios 的一个示例，以及如何在 Vite 项目中使用它来请求数据。
首先，创建一个新的 JavaScript 文件，比如 http.js 或 axiosInstance.js，并在其中配置 Axios 实例：

// src/http.js

import axios from 'axios';

// 创建一个新的 axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL
  timeout: 5000, // 设置超时时间
  headers: {'Content-Type': 'application/json'}
});

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加 token 到请求头
    const token = localStorage.getItem('token'); // 示例：从本地存储获取 token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data; // 返回实际的数据而不是整个响应对象
  },
  error => {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 处理未授权的情况
      // 可能需要重定向到登录页面或者其他操作
    }
    return Promise.reject(error);
  }
);

export default instance;

使用封装后的 Axios

接下来，在你的 Vue 组件或其他地方使用这个封装好的 Axios 实例：

 // src/views/MyComponent.vue

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <pre>{{ data }}</pre>
  </div>
</template>

<script>
import axiosInstance from '@/http'; // 引入封装好的 axios 实例

export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axiosInstance.get('/endpoint'); // 替换为你的 API 端点
        this.data = response;
      } catch (error) {
        console.error("Failed to fetch data:", error);
      }
    },
  },
};
</script>