CODEWITHSUNDEEP
javascriptreactjsaxios
krsna
krsna

Reputation: 4333

Make second api call when there is no error on the first using Axios in React

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();

Upvotes: 0

Views: 1483

Answers (3)

Supriy Jinturkar
Supriy Jinturkar

Reputation: 61

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();
}

Upvotes: 2

Sabshane
Sabshane

Reputation: 241

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

Upvotes: 0

anolan23
anolan23

Reputation: 522

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

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

Upvotes: 1

Related Questions