React查询变异:接口调用失败时，通过onError回调从服务器获取响应
React查询变异:接口调用失败时，通过onError回调从服务器获取响应
提问于 2020-11-11 21:11:04
我正在做一个React JS项目。在我的项目中，我使用了React query，https://react-query.tanstack.com/docs/guides/mutations。我正在使用突变向服务器发出post请求。但是，当API调用使用onError回调失败时，我正在尝试从服务器获取响应返回。
这是我的代码。
let [ createItem ] = useMutation(payload => createItem(payload), {
onSuccess: (response) => {
},
onError: (error) => {
// here I am trying to get the response. In axios, we can do something like error.data.server_error_code
},
onMutate: () => {
}
})正如您在注释中看到的，我正在尝试在onError回调中读取从服务器返回的字段。我怎么才能做到这一点呢？
回答 2
Stack Overflow用户
发布于 2020-12-02 02:39:18
let [ createItem ] = useMutation(payload => createItem(payload), {
onSuccess: (response) => {
},
onError: (error) => {
console.log(error.response.data);
console.log(error.response.status);
},
onMutate: () => {
}
})目前还不完全清楚是否只在onError中执行console.log(error)，但error.response应该是可用的。
Stack Overflow用户
发布于 2021-06-17 23:10:04
它应该按原样工作。确保您的HTTP客户端(可能是Axios)配置为抛出错误。例如：
import axios from 'axios'
import { useMutation } from 'react-query'
import { BASE_URL } from 'constants/api'
const client = axios.create({
baseURL: BASE_URL,
})
const request = (options) => {
const onSuccess = (response) => response
const onError = (error) => {
// Throwing an error here
throw error
}
return client(options).then(onSuccess).catch(onError)
}
const { mutate } = useMutation(
async (data) =>
await request({
url: '/someUrl',
method: 'post',
data
}),
{ onError: (e) => console.log(e) }
)当然，最好将Axios设置存储在一个单独的文件中，然后在使用突变的地方导入'request‘变量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64787093
复制相关文章
相似问题
腾讯云开发者
