我无法获取获取结果的信息。 承诺

Question

当我尝试获取我的 API 的结果时，我做不到。 我的代码：

export async function validLoginFetch(email,password){

    const data = JSON.stringify({ email, password });
    let headers = {
      'Content-Type': 'application/json',
    };
  
    const options = {
      method: 'POST',
      body:data,
      headers:headers,
    }

    return await fetch('http://localhost:1323/profile/valid', options).then(response => {return response.json()})
}

调用函数的代码

    async function validateLogin() {
       if (password !== "" && email !== "") {
          const response = await validLoginFetch(email, password)
          console.log(response)
      }
    };

完整代码：

import '../App.css';
import { validLoginFetch } from '../api/user'
import React , { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default () => {

  const [email, setEmail]  = useState("");
  const [password, setPassword]  = useState("");
  const [validUser, setValidUser]  = useState(false);

async function validateLogin() {
   if (password !== "" && email !== "") {
      const response = await validLoginFetch(email, password)
      console.log(response)
  }
};

  useEffect(()=> {
    if (validUser){
      //useNavigate("/#");

    }
  
  });


  return (
    <div className="login">
      <form onSubmit={validateLogin}>
        <div>
          <span>email</span>
          <input
            onChange={e => setEmail(e.target.value)}
            id="email"
            name="email"
            placeholder=""
          />
        </div>
        <div>
          <span>password</span>
          <input
            onChange={e => setPassword(e.target.value)}
            id="password"
            name="password"
            placeholder=""
          />
        </div>
        <button
          onSubmit={validLoginFetch}
          id="authenticate-user-login"
          className="authenticate-user-login"
        >
          Login
        </button>
      </form>
    </div>
);

}

不返回任何东西。 我的路线运行良好。 问题不在后端。

如果我尝试删除异步并等待，则返回是一个 Promise。 如果我使用 async 并且 await 永远不会返回任何东西。 它停留在validLoginFetch中并且不会继续。 有人知道它可能是什么吗？

Answer 1

您应该使用 ASYNC/AWAIT 或 THEN，而不是同时使用两者。

尝试这个：

export async function validLoginFetch(email,password){

    const data = JSON.stringify({ email, password });
    let headers = {
      'Content-Type': 'application/json',
    };
  
    const options = {
      method: 'POST',
      body:data,
      headers:headers,
    }

    const response = await fetch('http://localhost:1323/profile/valid', options);
    const json = await response.json();

    return json; 
}

Answer 2

我找到了答案......我们需要在发送之前刷新表单以获取......所以问题是刷​​新表单的时间，我们需要在发送之前刷新。 要解决此问题，请设置在响应时刷新表单：

event.preventDefault();

就我而言：

解决在调用进行提取的函数之前放置这些命令：

async function validateLogin() {
   event.preventDefault();
   if (password !== "" && email !== "") {
      const response = await validLoginFetch(email, password)
      console.log(response)
  }
};