3

我正在开发一个 React JS 项目。我正在使用 React 查询https://react-query.tanstack.com/发出 API 请求。当 API 抛出 422 或 400 或 401 等时，我现在在 onError 回调中从服务器检索响应数据时遇到突变问题。

这是我的突变。

let [ createProductMutation, { data, error } ] = useMutation((payload) => createProduct(payload), {
    onMutate: () => {
      
    },
    onSuccess: (response) => {
      
    },
    onError: (err, variables, snapshotValue) => {
      //err is not the response from the server.
    }
  })

正如您在 onError 回调中看到的，无法从服务器检索响应。

数据和错误（createProductMutation 旁边的那个）也不是来自服务器的响应。

我试过用这个。

  try {
       let response = await createProductMutation(data);
        // response from the API is not here too, "response"
    } catch (e) {
        // response from the API is not here too
    }

如何在 onError 回调中检索响应？

4

2 回答 2

1

要获得响应，您需要将错误转换为 json，然后等待承诺。请参阅下面的示例，其中“消息”是您的后端为响应消息返回的任何内容。

onError: async (error, variables, context) => {
    const errorObj = error;
    const errorObjAsJSON = await errorObj.json();
    const { message } = errorObjAsJSON;
    console.log(message);
  },

您显然可以通过以下方式进一步浓缩

onError: async (error, variables, context) => {
        const errorObj = await error.json();
        const { message } = errorObj;
        console.log(message);
      },
于 2021-01-07T17:21:23.763 回答
0 
let [ createItem ] = useMutation(payload => createItem(payload), {
  onError: (error) => {
    console.log(error.response.data);
    console.log(error.response.status);
  }
})

对我来说，上述解决方案有效！在里面onError，error.response 应该是可用的。

于 2021-10-20T04:27:00.987 回答