如何在 Axios 中封装事件中心EventEmitter

在 Axios 中封装一个事件中心 EventEmitter 答应你在请求的差别阶段（如请求开始、请求乐成、请求失败等）触发事件。这可以通过创建一个自界说的 Axios 实例，并结合 Node.js 的 events 模块来实现。以下是一个具体的步调指南和示例代码，展示了如何在 Axios 中封装一个事件中心。
步调 1: 安装 Axios

首先，确保你已经安装了 Axios。如果还没有安装，可以使用 npm 或 yarn 进行安装：

1. npm install axios

复制代码

或者

1. yarn add axios

复制代码

步调 2: 创建事件中心类

接下来，创建一个新的类，该类将继续自 Node.js 的 EventEmitter 类，并封装 Axios 实例。

1. const axios = require('axios');
2. const EventEmitter = require('events');
4. class AxiosEventEmitter extends EventEmitter {
5.   constructor(baseURL = '') {
6.     super();
7.     this.axiosInstance = axios.create({
8.       baseURL: baseURL,
9.       // 可以在这里添加其他 Axios 配置
10.     });
12.     // 设置请求拦截器
13.     this.axiosInstance.interceptors.request.use(
14.       config => {
15.         // 在请求发送前触发事件
16.         this.emit('request-start', config);
17.         return config;
18.       },
19.       error => {
20.         // 请求错误时触发事件
21.         this.emit('request-error', error);
22.         return Promise.reject(error);
23.       }
24.     );
26.     // 设置响应拦截器
27.     this.axiosInstance.interceptors.response.use(
28.       response => {
29.         // 请求成功时触发事件
30.         this.emit('response-success', response);
31.         return response;
32.       },
33.       error => {
34.         // 响应错误时触发事件
35.         this.emit('response-error', error);
36.         return Promise.reject(error);
37.       }
38.     );
39.   }
41.   // 封装 Axios 的请求方法
42.   request(config) {
43.     return this.axiosInstance(config);
44.   }
46.   get(url, params = {}, config = {}) {
47.     return this.axiosInstance.get(url, { params, ...config });
48.   }
50.   post(url, data = {}, config = {}) {
51.     return this.axiosInstance.post(url, data, config);
52.   }
54.   // 可以根据需要添加更多的封装方法，如 put, delete 等
55. }
57. module.exports = AxiosEventEmitter;

复制代码

步调 3: 使用封装的事件中心

现在，你可以在你的应用步伐中使用这个封装好的 AxiosEventEmitter 类。

1. const AxiosEventEmitter = require('./path/to/AxiosEventEmitter');
3. const emitter = new AxiosEventEmitter('https://api.example.com');
5. // 监听事件
6. emitter.on('request-start', config => {
7.   console.log('Request started:', config.url);
8. });
10. emitter.on('response-success', response => {
11.   console.log('Response succeeded:', response.data);
12. });
14. emitter.on('request-error', error => {
15.   console.error('Request error:', error.message);
16. });
18. emitter.on('response-error', error => {
19.   console.error('Response error:', error.response ? error.response.data : error.message);
20. });
22. // 发起一个 GET 请求
23. emitter.get('/some-endpoint')
24.   .then(response => {
25.     // 处理响应
26.   })
27.   .catch(error => {
28.     // 处理错误
29.   });

复制代码

在这个示例中，AxiosEventEmitter 类封装了 Axios 实例，并添加了请求和响应拦截器来触发事件。然后，你可以在你的应用步伐中创建这个类的实例，并监听你感兴趣的事件。当请求开始时、乐成时、或遇到错误时，相应的事件监听器将被调用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。