异步等待功能响应未定义

Question

我正在尝试将 URL 传递给异步函数，然后获取它的响应并尝试使用它的值，但是这里的响应未定义并且 await 没有等到值可用。这是什么原因以及如何解决这个问题

const AuthForm = () => {
  const [isLogin, setIsLogin] = useState(true);
  const [signupError, setSignupError] = useState("");
  const dispatch = useDispatch();
  const emailRef = useRef();
  const passwordRef = useRef();
  const switchAuthModeHandler = () => {
    setIsLogin((prevState) => !prevState);
  };
  const submitHandler = (e) => {
    e.preventDefault();
    const email = emailRef.current.value;
    const password = emailRef.current.value;
    const dbconnect = async (URL) => {
      fetch(URL, {
        method: "POST",
        body: JSON.stringify({
          email: email,
          password: password,
          returnSecureToken: false,
        }),
      })
        .then((res) => {
          if (res.ok) return res;
          else throw new Error("Failed");
        })
        .catch((err) => {
          console.log("setted Error");

          setSignupError(err);
        });
    };
    (async () => {
      if (isLogin) {
        const response = await dbconnect(
          "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyDXTW7owM4V9xy6RuUz8fI4nRKPcX-a2SU"
        );
        await response.then(dispatch(sliceActions.login(response.idToken)));
      } else {
        const response = await dbconnect(
          "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyDXTW7owM4V9xy6RuUz8fI4nRKPcX-a2SU"
        );
      }
    })();
  };

Answer 1

dbConnect 被标记为 async 所以它 returns 是一个承诺。它异步调用 fetch（没有 awaiting 它），然后到达函数的末尾而没有命中 return 语句，因此它将承诺解析为 undefined.

重写对 fetch 的调用以使用 await 和 try/catch 而不是 .then 和 .catch。 Return最终结果。

Answer 2

我想你忘记了 return dbconnect 方法中的结果。尝试使用以下代码：

const dbconnect = async (URL) => {
  return await fetch(URL, {
    method: "POST",
    body: JSON.stringify({
      email: email,
      password: password,
      returnSecureToken: false,
    }),
  })
  .then((res) => {
    if (res.ok) return res.json();
    else throw new Error("Failed");
  })
  .catch((err) => {
    console.log("setted Error");

    setSignupError(err);

    return null;
  });
};

其他方式：

const dbconnect = async (URL) => {
  try {
    return await fetch(URL, {
      method: "POST",
      body: JSON.stringify({
        email: email,
        password: password,
        returnSecureToken: false,
      }),
    }).then((result) => result.json());
  } catch(error) {
    console.log("setted Error");

    setSignupError(error);

    return null;
  }
};

我想你只是忘记了 return。

还有以下几行：

if (isLogin) {
  const response = await dbconnect("your-url");
  await response.then(dispatch(sliceActions.login(response.idToken)));
} else {
  const response = await dbconnect("your-url");
}

response已经有请求的结果所以，你不需要使用.then发送调度所以，我想你可以使用下面的代码。

if (isLogin) {
  const response = await dbconnect("your-url");

  await dispatch(sliceActions.login(response.idToken));
} else {
  const response = await dbconnect("your-url");
}

希望对你有所帮助

异步等待功能响应未定义

Async-Await functionality response became undefined

javascript

promise

async-await

reactjs