当 API 调用在自己的函数中时，如何等待 API 调用完成后再进行另一个调用？

Question

我是一个 React 菜鸟，有一个 React 组件，其中包含几个内部有 API 调用的函数。然后我想从单独的 onSubmit 函数调用这些函数并进行另一个 API 调用，但我不想在前两个 API 调用完成之前运行第三个 API 调用。

代码设置如下：

function 1 (){
     fetch APIcall
     .then....
}

function 2 (){
     fetch APIcall
     .then....
}

function onSubmit(){
     function1()
     function2()
     fetch APIcall()     // don't want to run this until the other 2 calls are completed
     .then... 
}

我尝试制作 function 1 和 function2 异步函数，但后来我不确定如何等待 onSubmit() 函数中的承诺。这可以通过异步等待来完成，还是有更好的方法来处理这个问题？

Answer 1

使用异步等待

async function apiCall() {
  await function1();
  await function2();
  await function3();
}

通过使用 async/await，您可以在另一个 api 调用之前等待一个 api 响应

Answer 2

您有两种方法来处理多个 API 调用。第一次运行 顺序执行，而 Promise.all 并发执行。选择 最适合您需求的方法。

顺序执行（等待每个函数）：

async function onSubmit() {
      await function1();
      await function2();
      await function3();
    }

并发执行（Promise.all()）：

await Promise.all(
[function1(), function2(), function3()]
);