当第一次在 React 中使用 Axios 没有错误时进行第二次 api 调用

Question

I have three API calls which should be dependent on one another. The second API call should trigger only when the first succeeds.

With my current implementation, I'm getting a CORS error when the first API call is made and was able to catch the error in the catch block. However, I'm seeing that the second and third APIs calls are made irrespective of the error that got caught in the first API call.

Could anyone please advise?

const firstApiCall = async() => {
  try {
    await axios.post(
      process.env.FIRST_API,
      payload
    );
  ]
} catch (err) {
  console.log(`err`, err);
}
};


const secondApiCall = async() => {
  try {
    await axios.post(
      process.env.SECOND_API,
      payload

    }
  } catch (err) {
    console.log(`err`, err);
  }
};

const thirdApiCall = async() => {
  try {
    await axiosInstance.patch(
      process.env.THIRD_API,
      payload
    );
  } catch (err) {
    console.log('err', err);
  }
};

firstApiCall();
secondApiCall();
thirdApiCall();

Answer 1

You're calling the functions synchronously when you need to do it asynchronously:

 async function performTasks() {
    await firstApiCall();
    await secondApiCall();
    await thirdApiCall();
  }
  performTasks();

Answer 2

You can use the ES6 Promise implementation approacg. Therefore you should take a look to this ressource : [Promise][1]

With the promise approach you can react at each step / each API call. [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Answer 3

async await functions work only in their local scope. For example:

const myFunc = async() => {
  try{
    //...
    await foo();
    //All the code below will be blocked till 
    //the promise return by foo function is resolved
  }
  catch{
    //...
  }
}

const main = () => {
  myFunc();
  otherFunc();
  //Other function calls
  //Regardless of using async await in myFunc, 
  //the code bellow myFunc will be executed as
  //async await will work only in myFunc block scope
}

main()

What you can do is, use async await inside the main function, so that the functions would be called in an order

const main = async () => {
  await myFunc();
  await otherFunc();
}