使用 fetch 的请求返回“typeerror: response.json is not a function”（ReactJS/node;express0 [关闭]

Posted 2023-02-27

【中文标题】使用 fetch 的请求返回“typeerror: response.json is not a function”（ReactJS/node;express0 [关闭]

【英文标题】：Request using fetch returns "typeerror: response.json is not a function" (ReactJS/node;express0 [closed]

【发布时间】：2021-04-20 02:52:18

【问题描述】：

我正在开发一个带有 reactjs 的网页和一个带有 nodejs 的简单 REST api/数据库，我正在尝试从前端正确使用我的这个 API。它应该发送一个包含 username,email,password 的 json 并返回这个新注册的信息。我在我的 API 中使用 express，并且我的 create(POST) 方法正在工作，因为我在 GUI API 客户端上进行了测试。这是我在 API 中的发布请求：

router.post('/register', async (req, res) => 
try 
    const  email  = req.body;

    if (await User.findOne( email ))
        return res.status(400).json( error: 'E-mail already registered' );

    const user = await User.create(req.body);

    user.password = undefined;

    return res.json( user, token: generateToken( id: user._id ) );

catch (err) 
    return res.status(400).json( error: 'Registration failed' )

);

在我的前端应用程序中，我使用 fetch 方法来调用我的 API，这里是：

    create = async () => 
    fetch("http://localhost:3001/auth/register", 
        "method": "POST",
        "headers": 
            "Content-Type": 'application/json'
        ,
        "body": JSON.stringify(
            "username": "test",
            "email": "[e-mail]",
            "password": "test"
        )
    )
        .then(res => Response.json()) //<< The problem is here
        .then(res => 
            console.log(res)
        )
        .catch(err => 
            console.log(err)
        )

但是当我在前端调用这个创建方法时，我得到了错误： TypeError: Response.json 不是函数

我知道 then 的参数必须是一个函数，但我不确定我应该以另一种方式处理响应。有人知道为什么会这样吗？

【问题讨论】：

在传递的参数上调用.json，而不是window.Response构造函数

试试res.json()而不是Response.json()

用res.json()替换Responce.json()

【参考方案1】：

正如其他人所指出的，事实上，你自己，Response.json() 是不正确的。您应该像在res => res.json() 中一样在响应对象上调用json() 函数。这样，下一个 then 将 JSON 响应体作为对象获取，您可以像这样访问它 json.token

调用json() 函数的另一种方法如下：

...
.then(res => 
    res.json().then(json => 
       //Do stuff with json here
    )
) 
.catch(err => console.log(err))

并跳过向fetch 调用添加第二个then。差异当然无关紧要，但旨在说明这一点。

【参考方案2】：

您需要使用您创建的参数的名称，如下所示：

res => res.json()