前端大佬都在用的actionDelegationMiddleware究竟有多香？

本文链接：https://blog.youkuaiyun.com/u012573773/article/details/143102349

作为一个前端开发者,我深知跨组件通信的痛点。今天,我要和大家分享一个让我眼前一亮的工具 - alovajs 的 actionDelegationMiddleware。这个中间件简直就是跨组件通信的得力助手!它让我们可以在任意组件中触发其他组件的请求操作,解决了很多麻烦。用了它之后,我感觉整个项目的架构都清晰了不少。

alovajs: 不只是另一个请求库

alovajs 是一个非常强大的请求工具。它与 react-query 和 swr 这些库有很大不同:

alovajs 提供了完整的请求方案,大大简化了 API 集成流程。
它的 hooks 针对各种请求场景提供了完整的解决方案,包括状态化数据、特定事件和 actions。
最令人兴奋的是,alovajs 有 15+ 个这样的"请求策略",让我们用很少的代码就能实现复杂的请求逻辑。

这些特性让我在使用 alovajs 时感到非常轻松和高效。如果你也对 alovajs 感兴趣,不妨去官网看看: https://alova.js.org。相信你会发现更多惊喜!

actionDelegationMiddleware 的使用方法

那么,这个神奇的 actionDelegationMiddleware 具体怎么用呢?让我来给大家演示一下:

基本使用

在组件 A 中,我们这样使用中间件:

import { actionDelegationMiddleware } from 'alova/client';

useRequest(queryTodo, {
  middleware: actionDelegationMiddleware('actionName')
});

接着,在组件 B 中,我们可以这样触发组件 A 的请求操作:

import { accessAction } from 'alova/client';

accessAction('actionName', delegatedActions => {
  delegatedActions.send();
  delegatedActions.abort();
});

就是这么简单!我第一次使用时,被它的便捷性惊艳到了。

批量触发操作函数

更厉害的是,我们还可以批量触发操作函数。比如,在多个组件中使用相同的委托名称:

// 组件C
useRequest(queryTodo, {
  middleware: actionDelegationMiddleware('actionName1')
});

// 组件D
useRequest(queryTodo, {
  middleware: actionDelegationMiddleware('actionName1')
});

在组件 E 中,我们可以同时触发组件 C 和 D 的请求:

accessAction('actionName1', delegatedActions => {
  delegatedActions.send();
  delegatedActions.abort();
});

这个功能让我在处理复杂的组件交互时省了不少力气。

使用正则表达式批量触发

我们还可以使用正则表达式来更灵活地触发操作函数:

// 组件F
useRequest(queryTodo, {
  middleware: actionDelegationMiddleware('prefix_name1')
});

// 组件G
useRequest(queryTodo, {
  middleware: actionDelegationMiddleware('prefix_name2')
});

// 组件H
accessAction(/^prefix_/, delegatedActions => {
  delegatedActions.send();
  delegatedActions.abort();
});