reactjs 来自API的错误响应在react查询中被视为成功

dtcbnfnu  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(134)

在React查询中,每个响应都被视为成功。
Axios是用来调用API请求的,这里是一个axios组件。

export const callAxios = async ({
    url,
    method,
    data,
    headers,
    params,
    responseType,
}: CallAxiosAPI) => {

    const config: AxiosRequestConfig = {
        method: method || 'GET',
        url: `${baseUrl}${url}`,
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            Authorization: accessToken !== null ? `Bearer ${accessToken}` : '',
            ...headers,
        },
        data,
        params,
        responseType,
    }
    return axios(config)
        .then((res: AxiosResponse<any, any>) => {
            return res
        })
        .catch(err => {
            return err
        })
}

下面是使用useMutation的示例

const adjustProfit = useMutation(
        ['adjustProfit'],
        (params: { configurationId: string; configurationPriceId: number; data: IAdjustType }) => {
            return PricingQueries.adjustProfit(
                parseFloat(String(params.configurationId)),
                params.configurationPriceId,
                params.data,
            )
        },
        {
            onSuccess: () => {
                refetch()
            },
            onError: () => {
                toast.error(t(`message.adjust_price_failed`))
            },
        },
    )

即使调用了onSuccess也有错误。

kx7yvsdv

kx7yvsdv1#

问题出在.catch上,通过捕获一个错误(因为你想记录),然后“不”重新抛出这个错误,你就把这个错误转换成了一个已解决的Promise,所以你实际上从来没有把这个错误返回给useQuery。
修复方法是删除catch并使用onError回调进行日志记录,或在日志记录后重新引发错误。
这个陷阱太常见了,我已经把它添加到我的FAQ帖子中:https://tkdodo.eu/blog/react-query-fa-qs#why-do-i-not-get-errors-

相关问题