React中如何获取服务器响应的token并赋值变量？

你的核心问题是没有等待response.json()这个Promise完成解析，直接把Promise对象赋值给了body，自然拿不到token属性。下面是修复后的代码和关键说明：

修复后的handleLogin函数 #

const handleLogin = async () => {
    try {
      const response = await fetch("/url/api/manager/login", {
        method: "POST",
        body: JSON.stringify({ email, password }),
        headers: {
          "Content-Type": "application/json",
        },
      });
      // 关键：用await等待Promise解析，拿到实际的响应体数据
      const body = await response.json();
      console.log(body); // 现在这里会打印包含token的对象

      if (response.ok) {
        // 确认响应成功后再提取token并存储
        const token = body.token;
        console.log(token);
        setAccessTokenCookie(token);
        handleLoginBool();
        console.log("Login successful");
      } else {
        // 响应失败时可以打印服务器返回的错误信息
        console.log("Login failed:", body);
      }
    } catch (error) {
      console.error("Error logging in:", error);
    }
  };

关键说明 #

1. 必须用await处理response.json()：response.json()是异步操作，返回Promise，只有用await才能拿到解析后的JSON对象，而不是Promise本身。
2. 调整逻辑顺序：先确认response.ok再处理token，避免在响应失败时（比如401、400）尝试提取不存在的token。
3. 关于accessToken的日志：如果accessToken是React状态（比如用useState声明的），setAccessTokenCookie执行后，accessToken不会立刻更新——React状态更新是异步的，不要在set之后立刻log这个值，要在组件渲染时查看。
4. Cookie存储排查：如果setAccessTokenCookie仍无法存入cookie，检查函数实现，确保它正确使用document.cookie或第三方库（如js-cookie），且传入的token是有效字符串。

内容的提问来源于stack exchange，提问作者DoMaxBa