ToB企服应用市场:ToB评测及商务社交产业平台

标题: 如何在 Axios 中封装事件中心EventEmitter [打印本页]
作者: 梦应逍遥    时间: 2024-10-7 04:26
标题: 如何在 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4