conditionally make the 2nd axios call happen based on a first

Question

I'm trying to make it so that I can look at the returned object from the first axios call, and if empty, continue to the 2nd (if it's not empty I will craft an error message)

Basically, the 2nd axios call should only happen if the userStatus object is empty. Both axios calls work independently but how Can I properly make this work so that I can hit the 2nd call if the object is empty?

Currently I get a 200 on the first axios call and an empty userStatus object in my console but the 2nd call doesn't happen

changeStatus: function(event) {

  let user = this.auth_user;

  axios.get('/user/' + user + '/status')
  .then((response) => {
      this.userStatus = response.data
  })

  if(this.userStatus.length < 1){

    let data = {
        id: event.id,
        status: 'A'
    };

    axios.post('/status/change',data)
    .then((response) => {
        if (response.data.success == false) {
            this.errors = [];
            const errorLog = Object.entries(response.data.errors);
            for (var i = errorLog.length - 1; i >= 0; i--) {
                console.log(errorLog[i][1][0]);
                this.errors.push(errorLog[i][1][0]);
            }
        }
    })


  }else{
    console.dir('No');
  }
},

Axios is async: move everything inside the `.then` callback or use `async/await`. — Karl-André Gagnon, Oct 01 '19 at 18:45
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, Oct 01 '19 at 18:49

Vince · Accepted Answer · 2019-10-01T20:03:11.437

The issue is that your code is being executed synchronously (essentially line-by-line), while axios calls are asynchronous. So while your first axios call is still executing in the background, the statement if(this.userStatus.length < 1) gets evaluated – before your first call has returned.

If your second call is conditioned upon the result of your first call, you would need to make your second call inside the .then() handler of your first call:

changeStatus: function(event) {
  let user = this.auth_user;

  axios.get('/user/' + user + '/status')
    .then((response) => {
      this.userStatus = response.data;

      if(this.userStatus.length < 1) {
        let data = {
          id: event.id,
          status: 'A'
        };

        axios.post('/status/change',data)
          .then((response) => {
            if (response.data.success == false) {
              this.errors = [];
              const errorLog = Object.entries(response.data.errors);

              for (var i = errorLog.length - 1; i >= 0; i--) {
                console.log(errorLog[i][1][0]);
                this.errors.push(errorLog[i][1][0]);
              }
            }
          });
       } else {
         console.dir('No');
       }
    });
},

I'm confused about your statement that the second call is "happening synchronously", and if I'm confused, I would say OP is as well. AFAIK, both calls are *async* and both calls are "happening" *synchronously*. You might need to reword that part. Nonetheless, good answer. — Karl-André Gagnon, Oct 01 '19 at 18:56
@Karl-AndréGagnon, It makes sense to me, but I can see how it could be confusing. I'll try to clarify. — Vince, Oct 01 '19 at 18:59
This worked perfectly and I don't know WHY I didn't realize to do this. Thanks so much — Geoff_S, Oct 01 '19 at 19:11
@TomN. Sometimes the best thing about Stack Overflow is just getting another pair of eyes on your code. — Vince, Oct 01 '19 at 20:03

conditionally make the 2nd axios call happen based on a first

1 Answers1