javascript - 如何使Javascript / React / Typescript提取调用异步？(How to make a Javascript/React/Typescript fetch call asynchronous?)

Question

Consider the following Javascript/React code:(考虑以下Javascript / React代码：)

// Javascript function that has a fetch call in it. 
export const signIn = (email:string, password:string) => {
  console.log("FETCHING...");

  fetch(`${endPoint}/sign_in`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email,
      password
    })
  })
  .then((response) => {
    return response.json()
  })
  .then(({ data }) => {
    console.log("FETCHED DATA...")
  })
  .catch((error) => {
    console.error('ERROR: ', error)
  })

  console.log("DONE FETCHING...");
}

// A functional component that references signIn.
export const SignIn: React.FC<Props> = () => {
  // irrelevant code ...

  const onSubmit = (e: CustomFormEvent) => {
    e.preventDefault()
    console.log("SIGNING IN...")
    // calls my signIn function from above
    // I don't want this to finish until the fetch inside it does.
    signIn(email, password, setAuthentication, setCurrentUser)
    console.log("SIGNED IN...");
  }

  return <>A form here submits and calls onSubmit</>
}

This produces the following console log output:(这将产生以下控制台日志输出：)

SIGNING IN...
FETCHING...
DONE FETCHING...
SIGNED IN...
FETCHED DATA...

I want FETCHED DATA... to show up before DONE FETCHING... .(我希望FETCHED DATA...在DONE FETCHING...之前显示。)

I've tried playing around with aysnc/await but that's not working so I don't know where to go from here.(我尝试过与aysnc/await一起玩，但是那没有用，所以我不知道从这里去哪里。)   ask by aarona translate from so

Answer 1

Just add another .then(只需添加另一个.then)

  .then((response) => {
    return response.json()
  })
  .then(({ data }) => {
    console.log("FETCHED DATA...")
    return
  }).then(()=> {
      console.log("DONE FETCHING...");
  })
  .catch((error) => {
    console.error('ERROR: ', error)
  })