错误响应在SWR的数据对象中返回，而不是在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中的错误对象是空的

可能的原因：

• 尝试在 fetcher 函数中使用 Catch （你的

  getData

  ）。

可能的解决方案：

不要使用 try-catch，只要保持简单即可，因为您正在使用 axios :

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

我在我的

fetcher

函数中使用了try-catch，错误在swr的数据对象中返回，删除try-catch后，错误在SWR的错误对象中返回

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