React不能从错误响应中提取json数据

Question

我仍然是一个新的反应，我试图创建一些动态的内容和管理错误的Usefetch。

从20x响应代码中获取数据是很好的。但是，当响应代码是错误(40x，50x)时，我无法获得响应体。

例如，我的回复回复状态400:错误请求:内容类型"application/json“{ message: "My Custom Error Message" }

import React from "react";
import {useFetch} from "react-async";


const Feedback = () => {

  const myRequest= useFecth("my_api_url");

  if (myRequest.isPending)
    return("Be Patient"); // works fine

  if (myRequest.isFullfilled)
    return(myRequest.data.myJsonObject); // works fine

  if (myRequest.isRejected)
    return(myRequest.error.message); // only shows 400 bad request

  return(null); // request was not sent yet, don't bother
}

我似乎在myRequest.error中找不到身体，myRequest.data是空的(因为myRequest.isRejected)

当http状态代码是错误时，是否有一种方法可以恢复响应体？

Answer 1

谢谢你的答复：

阅读我的package.json的Regaring库版本：

"dependancies": {
    "react": "^17.0.2",
    "react-async": "^10.0.1"
}

import React from "react";
import {useFetch} from "react-async";


const Feedback = () => {

  const myRequest= useFecth("my_api_url");

  if (myRequest.isPending)
    return("Be Patient"); // works fine

  if (myRequest.isFullfilled)
    return("data: " + myRequest.data.myJsonObject);
  if (myRequest.isRejected)
    return("error: " + myRequest.data.myJsonObject); // OUCH!

  return(null); // request was not sent yet, don't bother
}

我区分完全填充和拒绝状态，因为它符合我想要做的事情的想法。

我得到了Uncaught (in promise) TypeError: myRequest.data is undefined，这就是我从react异步文档中了解到的

data
any
Last resolved promise value, maintained when new error arrives.

只有在isFullfilled时才更新数据。只有在isRejected时才更新错误。

此外，JSON.stringify(myRequest.value)还返回{"response": {}}

Answer 2

最终解决方案：

我试图在本地运行这段代码，这似乎是不可能通过react-async库实现的。我还用相同的结果测试了axios库。似乎使用内置的fetch()方法只是解决问题的方法。

旧的fix尝试：

你能告诉我你到底在用哪个图书馆吗？

问题是您正在读取Response.error.message，如果出现错误，它将收到“400个错误请求”。试试这个：

import React from "react";
import {useFetch} from "react-async";


const Feedback = () => {

  const myRequest = useFetch("my_api_url");

  if (myRequest.isPending)
    return("Be Patient"); // works fine

  if (myRequest.isFullfilled || myRequest.isRejected)
    return(Response.data.myJsonObject); // should show response body (even if it was an error response)

  return(null); // request was not sent yet, don't bother
}

编辑:修正了明显的错误- IsPending -> isPending EDIT2:另一个错误：useFecht -> useFetch