Sonner项目中为Promise通知添加描述信息的技术实践

概述

在现代前端开发中，Toast通知系统已成为提升用户体验的重要组成部分。Sonner作为一个React通知组件库，提供了简洁易用的API来实现各种通知场景。其中，toast.promise()方法特别适合处理异步操作时的状态反馈，但开发者有时需要在这些通知中展示更丰富的内容，如标题加描述的复合结构。

Promise通知的基本用法

Sonner的toast.promise()方法接受三个参数：

1. 一个Promise对象
2. 加载状态时显示的提示
3. 成功和错误状态的回调函数

基本使用方式如下：

toast.promise(
  fetchData(), // 异步操作
  {
    loading: '加载中...',
    success: '操作成功',
    error: '操作失败'
  }
)

进阶：添加描述信息

当我们需要在成功通知中同时显示标题和描述时，可以利用React组件的灵活性。虽然Sonner没有直接提供description字段，但我们可以通过返回JSX元素来实现复合结构。

实现方案

1. 定义响应类型： 首先定义一个包含标题和描述的类型结构

   type ResponseType = {
     header: string;
     description: string;
   }
   

2. 构建复合通知： 在success回调中返回包含标题和描述的JSX元素

   toast.promise<ResponseType>(
     Promise.resolve({
       header: "系统通知",
       description: "您的数据已成功提交并处理完成",
     }),
     {
       loading: "处理中...",
       success: (data) => (
         <div>
           <div className="font-semibold">{data.header}</div>
           <p className="text-sm">{data.description}</p>
         </div>
       ),
       error: "操作失败"
     }
   );
   

样式优化建议

为了使通知更加美观，可以添加一些CSS类：

• 使用font-semibold使标题加粗
• 为描述文字使用较小的字号(text-sm)
• 添加适当的间距(margin/padding)

实际应用场景

这种技术特别适用于以下场景：

1. 表单提交后显示详细结果
2. 后台任务完成时展示摘要和详情
3. 需要同时显示操作结果和后续指引的情况

注意事项

1. 保持描述简洁明了，避免过多文字
2. 考虑移动端显示，确保复合布局在小屏幕上也能良好呈现
3. 错误处理也可以采用同样的模式，返回更详细的错误信息

通过这种方式，开发者可以在Sonner的通知中构建出信息层级分明、用户体验良好的提示系统，满足更复杂的业务需求。