Javascript 如何使一个方法等待另一个方法完成？

我在React中有以下方法，并且希望完成前两个方法，它们将图像上载到cloudinary，并在执行API调用addStudent之前将URL设置为编码状态，因为需要传递更新状态值

下面的代码和注释中的预期顺序。目前，如果我在开发人员工具中查看网络，它的执行顺序是正确的，但最后一个API调用addStudent似乎不会等到setState在以前的方法中执行，因为它会与base64数据崩溃

如何修改以下代码以达到所需的订单

addStudent= e => {
  this.setState({step:0})  //renders a loading screen

  const files1 = Array.from(this.state.profilePic)
  const formData1 = new FormData()
  files1.forEach((file, i) => {
    formData1.append(i, file)}) 

  const files2 = Array.of(this.state.passportPhoto)
  const formData2 = new FormData()
  files2.forEach((file, i) => {
    formData2.append(i, file)})


//uploads profilePic to cloudinary and sets state to URL returned by the api call --> order 1
    fetch(`http://localhost:3030/image-upload`, {method: 'POST',body: formData1})
      .then(res => res.json())
      .then(images1 => {this.setState({profilePic: images1[0].url})})


//upload passportPic to cloudinary and sets state to URL returned by the api call --> order 2
      .then(fetch(`http://localhost:3030/imageUploadPassport`, {method: 'POST',body: formData2})
      .then(res => res.json())
      .then(images2 => {this.setState({passportPhoto: images2[0].url})})

//uses data in state objects above to enter data to SQL database  --> order 3
      .then(fetch(`http://localhost:3030/addStudent?profPicURL=${this.state.profilePic}&passportURL=${this.state.passportPhoto}`)
      .catch(err=>console.error(err))
      .then(this.setState({step:2008}))))   //displays a success screen

  }

addStudent=async e=>{
this.setState（{step:0}）//呈现加载屏幕
const files1=Array.from（this.state.profilePic）
const formData1=新FormData（）
files1.forEach（（文件，i）=>{
formData1.append（i，file）}）
const files2=Array.of（this.state.passportPhoto）
const formData2=新FormData（）
files2.forEach（（文件，i）=>{
formData2.append（i，file）}）
const data1=等待取数（'http://localhost:3030/image-upload'，{method:'POST'，body:formData1}）；
const image1=wait data1.json（）；
const data2=等待取数（'http://localhost:3030/imageUploadPassport“，{method:'POST'，body:formData2}）；
const image2=wait data2.json（）；
const data3=等待获取(`http://localhost:3030/addStudent?profPicURL=${image1[0].url}&passportURL=${image2[0].url}`）；
this.setState（{step:2008}）；
}

使用Javascript承诺等待异步函数

---

用于异步等待。您应该为每次调用创建异步函数，并且只调用第一次执行后的第二次执行@：尝试在最后一次调用setState一次，然后。setState是异步的，您也可以尝试使用**clallback函数来设置道具。您的代码已经按顺序执行了

然后

等待上一个调用完成，然后再调用下一个调用。您可能应该问为什么

setState

不能立即更新UI。这是否回答了您的问题？从重复问题

中可以看出，无论您在React事件处理程序中执行了多少组件中的多少setState（）调用，它们都将在事件结束时只生成一次重新渲染。

原始代码已经按顺序执行。OP的实际问题是，为什么中间

setState

调用似乎没有按顺序执行