从 api 调用中检索数据答案

【问题标题】：retrieving data from an api call从 api 调用中检索数据
【发布时间】：2022-11-24 14:08:30
【问题描述】：

我已经成功地从登录 API 调用中检索到数据，并且返回了记录用户信息的 data 变量，例如。 id、token、email，这已成功打印到控制台。

async function login(email: string, password: string, rememberMe: boolean) {
  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password, rememberMe }),
  };

  await fetch(`${API_URL}/auth/login`, requestOptions).then((response) => {
    if (response.ok === true) {
      response.json().then((data) => {
        console.log(data);
        if (data.success === true) {
          localStorage.setItem("USER_ID", data.id);
          localStorage.setItem("EMAIL", data.email);
          localStorage.setItem("ACCESS_TOKEN_KEY", data.token);
          return data;
        } else {
          return Promise.reject(new Error("toast.user.general_error"));
        }
      });
    } else {
      return Promise.reject(new Error(response.statusText));
    }
  });
}

但是我在登录控制台时得到user = undefined，提示我的数据变量未定义

function login(email: string, password: string, rememberMe: boolean) {
  return (dispatch: ThunkDispatch<{}, void, AnyAction>) => {

    authService.login(email, password, rememberMe).then(
      (user) => {
        history.push("/student/dashboard");
        console.log("user = ", user);
      },
      (error) => {
        dispatch(failure(error.toString()));
      }
    );
  };
}

为什么我不从我的提取请求中检索用户变量？我应该在返回之前用承诺包装 data 变量吗？

【问题讨论】：

登录不返回任何内容。

标签： reactjs typescript api fetch-api

【解决方案1】：

登录必须在顶层返回一些东西，而不是从 then 块中返回。由于您已经在使用 async/await，请像这样尝试。

async function login(email: string, password: string, rememberMe: boolean) {
  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password, rememberMe }),
  };

  const response = await fetch(`${API_URL}/auth/login`, requestOptions);
  
  if (!response.ok) return new Error(response.statusText);

  const data = await response.json();
  console.log(data);
  if (data.success !== true) return new Error("toast.user.general_error");
  return data;
}

【讨论】：