vue3项目中如何在拦截器中使用eventBus

在 Vue3 中，事件总线（Event Bus）通常用于管理应用中的全局事件传递，以便于组件间的通信。要在拦截器中使用事件总线，你需要按照以下步骤操作：

1. 安装和配置 event bus：首先安装一个轻量级的事件中心库，如 `vue-eventbus` 或者 `vuex-persistedstate` 的简易版。

npm install vuex-persistedstate # 或者 vue-event-bus

2. 创建事件总线实例：

import { createEventBus } from 'vue-event-bus'

const eventBus = createEventBus();

3. 在 Vue 应用的根组件中创建并初始化它：

// main.js 或 App.vue
setup() {
  onMounted(() => {
    // 初始化其他组件可以订阅的事件
    eventBus.$on('someEvent', (data) => {/* 处理事件 */});
  });
},
beforeCreate() {
  // 创建并监听所有组件需要的事件总线
  this.$eventBus = new EventBus();
},
destroyed() {
  this.$eventBus.$off(); // 移除所有的事件监听器
}

4. 在拦截器中使用 event bus：

创建一个拦截器插件，例如在 `src/api/http.interceptors.js` 文件中：

import axios from 'axios';
import eventBus from '@/eventBus';

export default {
  request(config) {
    // 当发送请求前，可以在这里添加操作
    if (process.env.NODE_ENV === 'development') {
      config.headers.common['X-Custom-Token'] = localStorage.getItem('token'); // 添加自定义头信息
    }
    
    eventBus.$emit('requestSending', { url: config.url }); // 发送请求开始事件

    return config;
  },
  response(response) {
    // 成功响应后处理
    eventBus.$emit('responseReceived', response.data); // 发送响应数据事件

    return response;
  },
  error(error) {
    // 错误处理时也可以发送错误事件
    eventBus.$emit('errorOccurred', error.response || error); // 发送错误事件
    
    console.error('Error:', error);
  },
};

5. 其他组件订阅事件并在适当的时候触发它们：

<script setup>
import { ref, onMounted } from 'vue';
import { useEventBus } from '@/hooks';

const eventBus = useEventBus();

onMounted(() => {
  eventBus.$on('responseReceived', (data) => {
    console.log('Received response:', data);
  });

  // 在组件内部触发事件
  // eventBus.$emit('someEvent', someData);
});
</script>