React-Toastify中Promise状态处理的常见误区与解决方案

前言

在使用React-Toastify进行异步操作通知时，开发者经常会遇到一个典型问题：Toast消息总是显示成功状态，即使后端返回了错误响应。本文将深入分析这一现象的原因，并提供完整的解决方案。

问题现象分析

当开发者使用toast.promise()方法配合axios进行HTTP请求时，经常会出现以下情况：

1. 后端实际返回409冲突状态码
2. 控制台正确打印了错误信息
3. 但Toast仍然显示为成功状态

示例代码如下：

toast.promise(
  axios
    .post('/api/kiosk', data)
    .then(response => console.log(response))
    .catch(error => console.error(error.response.data.error))),
  {
    pending: '处理中',
    success: '操作成功',
    error: '操作失败'
  }
)

根本原因

问题的核心在于Promise链的处理方式。在上述代码中：

1. catch方法处理了错误但没有重新抛出
2. toast.promise只能感知到Promise的最终状态
3. 由于错误被"消化"而没有继续传播，Promise实际上被视为已解决(resolved)

解决方案

正确的处理方式应该是在捕获错误后重新抛出，让toast.promise能够感知到真实的Promise状态：

toast.promise(
  axios
    .post('/api/kiosk', data)
    .then(response => {
      console.log(response)
      return response // 确保返回结果
    })
    .catch(error => {
      console.error(error.response.data.error)
      return Promise.reject(error) // 关键：重新抛出错误
    }),
  {
    pending: '处理中',
    success: '操作成功',
    error: '操作失败'
  }
)

最佳实践建议

1. 保持Promise链完整：确保错误能够正确传播到toast.promise
2. 简化代码结构：可以使用async/await语法更清晰地表达意图
3. 错误处理分层：可以在不同层级处理错误，但要确保最终状态正确

改进后的async/await版本：

toast.promise(
  (async () => {
    try {
      const response = await axios.post('/api/kiosk', data)
      console.log(response)
      return response
    } catch (error) {
      console.error(error.response.data.error)
      throw error // 重新抛出错误
    }
  })(),
  toastMessages
)

总结

React-Toastify的toast.promise方法依赖于Promise的最终状态来决定显示哪种Toast消息。开发者必须确保错误能够正确传播到Promise链的末端，而不是在中间环节被"消化"掉。通过遵循本文介绍的模式，可以确保Toast消息与实际操作结果保持一致。

记住，良好的错误处理不仅关乎用户体验，也是构建健壮应用的重要基础。