3

我正在做一个 React JS 项目。在我的项目中，我使用 React 查询https://react-query.tanstack.com/docs/guides/mutations。我正在使用突变向服务器发出发布请求。但是当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 回调中读取从服务器返回的字段。我怎样才能做到这一点？

4

2 回答 2

8 
let [ createItem ] = useMutation(payload => createItem(payload), {
    onSuccess: (response) => {
      
    },
    onError: (error) => {
      console.log(error.response.data);
      console.log(error.response.status);
    },
    onMutate: () => {
      
    }
})

刚做console.log(error)inside时并不完全清楚onError，但error.response应该可用。

于 2020-12-01T18:39:17.733 回答
1

它应该按原样工作。确保您的 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 设置存储在一个单独的文件中，然后只导入正在使用突变的“请求”变量。

于 2021-06-17T15:10:03.820 回答