如何在Next.js中获取并展示后端API返回的消息？

嘿，我懂你的困扰！你现在看不到后端返回的自定义消息，核心问题是fetch返回的response对象本身只是响应的元数据（比如状态码、响应头这类信息），并不是后端实际返回的内容。要拿到那个message，你得先调用response.json()来解析响应体才行。

咱们直接改代码来解决问题：

第一步：在前端解析后端的响应内容 #

修改你的formSubmit函数，拿到response后先解析JSON数据，之后就能直接用后端返回的消息了：

const formSubmit = async (e, name) => {
    e.preventDefault();
    const url = `${url_prefix}/${formName}`

    try {
        const response = await fetch(url, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ user }),
        });
        // 新增这行：解析后端返回的JSON格式响应体
        const responseData = await response.json();
        console.log(responseData); // 现在这里就能看到后端的message字段了
        
        if (response.ok) {
            router.push('/validateuser')
        } else if (response.status === 401) {
            // 直接用后端返回的消息，不用硬编码啦
            msgFn({message: responseData.message, type: 'F'})
            setTimeout(() => {
                msgFn({type: ''})
            }, 3000);
        }
      } catch (error) {
          // 顺便加个网络错误的兜底提示
          msgFn({message: '网络连接失败，请稍后重试', type: 'F'})
      }
};

小建议：规范后端状态码（可选） #

你的后端在用户已存在时返回了401状态码，不过从HTTP规范来说，401通常表示“未授权”，用户已存在这种场景更适合用409（冲突）状态码。当然这不是必须改的，只是个让接口更规范的小建议~

为啥之前看不到消息？ #

你之前console.log(response)时看到的是Response对象，它的body是一个可读流，必须通过json()、text()这类方法读取后，才能拿到后端实际返回的内容，所以直接打印response是看不到自定义消息的。

这样修改后，你就能灵活获取后端返回的各种消息，不用再硬编码错误提示啦！

备注：内容来源于stack exchange，提问作者MenimE