SWR 捕获请求中抛出的错误的问题

Question

我向后端发送了这个 axios 请求：

export const getData = async (
  url,
  requestBody = null
) => {
  
  try {
    const response =
      newSalesParameters &&
      (await axios({
        method: 'POST',
        url,
        data: { ...requestBody }
      }))
    return response
  } catch (error) {
    throw error.response.data
  }
}

这就是 error.response.data 的样子：

{
  errors: [Object],
  title: 'Es gab einen Validierungsfehler.',
  status: 422
}

这是我来自 /api/form.js 的处理函数，如果我控制台日志，我会得到错误：

async function handler2(req, res) {
  if (req.method === 'POST') {
    try {
      const form = await getForm(params?.url, params.requestData)
      if (form.data) {
        return res.status(200).json(form.data)
      }
    } catch (e) {
      return res.status(422).json(e)
    }
    return res.status(404)
  }
}

我的自定义挂钩中的 swr 调用：

import { useState, useEffect, useRef } from 'react'
import useSWR from 'swr'

export default function useForm(
...
) {
  const { data, error, isValidating } = useSWR(
   conditionMet
      ? [
          '/api/form',
          {
            method: 'POST',
            body: JSON.stringify({
         ...
            })
          },
          requestData
        ]
      : null,
    {
      revalidateIfStale: false,
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
      revalidateOnMount: true,
      suspense: true,
      keepPreviousData: true
    }
  )

  if (groupId === 'rating' && formId === 'simple') {
    return {
      ratingForm: data,
      isRatingFormLoading: isValidating,
      isRatingFormError: error
    }
  }
  console.log('======> THIS ERROR IS ALWAYS UNDEFINED', error)
  return {
    form: data,
    isFormLoading: isValidating,
    isFormError:
      (error || !formId || !groupId || !data || data.errors) && !isValidating
  }
}

如果我将其作为数据返回，我能够在组件中获取错误，但正如我在控制台日志中突出显示的那样，我无法从 SWR 请求中获取错误。该请求在浏览器中产生 422 错误。

有谁知道为什么我无法捕获此错误？到目前为止，我可以在任何地方控制台记录它，但我没有成功尝试在这里捕获它。

提前致谢！

Answer 1

问题：

如果我将其作为数据返回，我能够在组件中获取错误，但正如我在控制台日志中突出显示的那样，我无法从 SWR 请求中获取错误。

我的理解：

所以返回的错误是在SWR的数据对象中，并且SWR中的错误对象是空的

可能的原因：

• 尝试在

  {error : "Some error"}

  中返回像这样

  /api/form.js

  的 Error 对象，因为您已将错误返回为

  string

  ，这可能就是为什么

  SWR

  无法捕获该错误并将其视为数据。
• 也只是从 getData

  返回错误

  ：

  catch (error) { throw error }

可能的解决方案：

更改代码的

catch

部分以在

/api/form.js

中返回错误：

catch (e) {
     console.log(e)  // here you will get e.response & other things 
     return res.status(e.response.status || 500).json({error : e.toString() || "Internal Server Error"})
  } 

此后，这行

throw error.response.error

只需将其保留为

throw error

，这应该会导致 SWR 出现该错误。

请阅读：

• 处理错误 Axios : https://axios-http.com/docs/handling_errors
• 状态代码和错误对象： https://swr.vercel.app/docs/error-handling#status-code-and-error-object

如果您有任何疑问，请发表评论（如果有必要我会更新答案）