然后不等待 Promise

Question

I have this function using fetch

export async function login(email, password) {
  let url = new URL("http://localhost:8080");
  url.search = new URLSearchParams({
    t: "login",
    email: email,
    password: password
  });

  fetch(url, {
    method: "GET",
    headers: new Headers()
  })
    .then(response => response.text())
    .then(response => {
      console.log(response);
      return response;
    })
    .catch(err => console.log(err));
}

And the function that's supposed to call it and handle the result is this

handleSubmit() {
    login(this.state.email, this.state.password).then(r => {
      console.log(r);
      if (String(r) === "true") this.props.updatePath("/main");
      else this.setState({ current: 1 });
    });
  }

I'm new to javascript, and I'm still a bit confused with async thing. In the console, the log from the second comes before the log from the first function, so I'm assuming it's not waiting for it to function.

The log on the first function spits out the correct result, I just can't get it to the other side.

I was using axios at first (had some problems it with) and this approch worked. Is there something different about fetch that stops this from working? Any help would be appreciated

Answer 1

The Promise that comes from calling an async function resolves when that function returns. login internally doesn't await anything (that's probably a mistake). It returns before the internal fetch resolves. So while that fetch is in flight, your then callback in handleSubmit runs. Later the fetch initiated in login finishes and logs the actual response.

I would have you try writing login like this:

export async function login(email, password) {
  let url = new URL("http://localhost:8080");
  url.search = new URLSearchParams({
    t: "login",
    email: email,
    password: password
  });

  try {
    let response = await fetch(url, {
      method: "GET",
      headers: new Headers()
    });
    response = await response.text();
    console.log(response);
    return response;
  } catch (err) {
    console.log(err);
    // original code had this issue where it doesn't reject on error nor resolve to anything useful
  }
}

Answer 2

await is very simple concept - it just makes your function wait for the Promise in synchronous manner. In order to make use of it, put await before any expression that returns a Promise. In your case, you can return fetch() in your login() function and then just:

await login(this.state.email, this.state.password);
// execution continued when fetch is done