A lightweight library that promisifies React modal operations, allowing elegant handling of modal interactions using async/await syntax
npm install async-modal-render
一个将 React 模态框操作 Promise 化的轻量级工具库，让你可以使用 async/await 语法优雅地处理模态框交互。
在传统的 Modal 使用方式中，我们需要通过回调函数来处理用户的操作，这导致代码逻辑分散，难以维护：
``tsx
// ❌ 传统方式：代码逻辑分散，难以阅读
function TraditionalWay() {
const [visible, setVisible] = useState(false);
const handleClick = () => {
setVisible(true);
};
// 确认的回调逻辑 - 分散在另一个地方
const handleOk = async (formData) => {
try {
await api.submit(formData);
message.success('提交成功');
} catch (error) {
message.error('提交失败');
} finally {
setVisible(false);
}
};
// 取消的回调逻辑 - 又在另一个地方
const handleCancel = () => {
setVisible(false);
};
return (
<>
);
}
`
使用 async-modal-render，代码逻辑集中在一处，清晰易懂：
`tsx
import { asyncModalRender, AsyncModalRenderCancelError } from 'async-modal-render';
// ✅ async-modal-render 方式：逻辑集中，代码清晰
function AsyncModalWay() {
const handleClick = async () => {
try {
// 弹窗逻辑、确认逻辑、后续处理都在一起
const formData = await asyncModalRender(FormModal, { title: '填写表单' });
// 用户点击确认后才会执行到这里
await api.submit(formData);
message.success('提交成功');
// 继续后续操作
} catch (error) {
// 用户点击取消或发生错误都会进入这里
if (error instanceof AsyncModalRenderCancelError) {
console.log('用户取消了操作');
} else {
message.error('提交失败');
}
}
};
return ;
}
`
| 特性 | 传统 Modal | async-modal-render |
|------|-----------|-----------------|
| 代码组织 | 回调函数分散在多处 | async/await 集中处理 |
| 可读性 | 需要跳转查看不同回调 | 从上到下线性阅读 |
| 流程控制 | 需要状态管理 | Promise 自然流转 |
| 错误处理 | 分散在各个回调 | try/catch 统一处理 |
| 异步操作 | 回调嵌套 | async/await 扁平化 |
- 🎯 Promise 化：使用 async/await 处理模态框操作
- 🪶 轻量级：最小依赖，体积小
- 📦 TypeScript：完整的 TypeScript 支持
- ⚛️ React：支持 React 16.8+
- 🔧 灵活：兼容任何模态框组件库（Ant Design、Material-UI 等）
`bash`
npm install async-modal-render
或
`bash`
yarn add async-modal-render
或
`bash`
pnpm add async-modal-render
` {message}tsx
// ========== 创建一个模态框组件 ==========
function ConfirmModal({ onOk, onCancel, message }) {
return (
);
}
// ========== 在任何地方使用 async/await 调用 ==========
import { asyncModalRender, AsyncModalRenderCancelError } from 'async-modal-render';
async function deleteUser(userId) {
try {
// 等待用户确认
const result = await asyncModalRender(ConfirmModal, {
message: '确定要删除这个用户吗？'
});
// 用户点击了确认，继续执行
await api.delete(/users/${userId});`
message.success('删除成功！');
} catch (error) {
// 用户点击了取消或关闭了弹窗
if (error instanceof AsyncModalRenderCancelError) {
message.info('已取消');
}
// 其它错误
}
}
就是这么简单！不需要状态管理，不需要回调地狱，只需要简单的 async/await 流程。
更多用法见：文档
* [x] useAsyncModalRenderContext 的 render / renderFactory 的 AsyncModalRenderOptions 添加 destroyStrategy?: 'hook' | 'context'
* : useAsyncModalRenderContext 当前组件卸载后销毁context
* : useAsyncModalRenderContext 当前组件卸载后不销毁, 随着 AsyncModalRenderProvider 销毁UseAsyncModalRenderReturn
* [x] 添加一个 renderQuiet/renderSafe 函数。此函数在 onCancel 时不抛出错误，直接返回 undefined`
* [ ] 支持类组件的 Context 环境调用