Execute custom functions one after another - Callback logic in Vue.js

Question

There is a form which submits some data to an API in my component. Assume that it's method is ProcessLogin(). Inside this function I have written my API calls using axios. With the help of then() I have handled my server response and displayed my toast. All good.

Now as a part of my code clean up, I have decided to move all my axios functions to another api.js file and export functions from there. Here is an example function I have in my api.js file :

function ApiLogin(data) {
const url   = `${BASE_URL}/authenticate`;
axios.post(url,data).then(response => {
  return response;
}).catch(error => {
  return error.response;
});
}

On the other side in my component I have my method defined as below :

methods: {
    ProcessLogin() {
    var status = ApiLogin(this.data);
    console.log(status);
 }
}

When executing this, I get undefined on my console. I know why it is happening. Because console.log(status) executes before ApiLogin could process and sends it's response. How to handle this kind of situation.? I know that callback is the rescue here, but I am not really sure about how to integrate it.

Steve Holgado · Accepted Answer · 2017-10-19 07:48:27Z

2

If you return the axios call from your ApiLogin function:

function ApiLogin(data) {
  const url = `${BASE_URL}/authenticate`
  return axios.post(url, data)
}

You could then handle the response in your component using then and console log from there:

methods: {
  ProcessLogin() {
    ApiLogin(this.data)
      .then(res => console.log(res))
      .catch(err => console.log(err))
  }
}

...or with async/await:

methods: {
  ProcessLogin: async function() {
    try {
      var status = await ApiLogin(this.data)
      console.log(status)
    }
    catch(err) {
      console.log(err)
    }
  }
}

edited Oct 19, 2017 at 7:48

answered Oct 19, 2017 at 7:02

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jithesh Kt Over a year ago

Perfect. Thank you.

Steve Holgado Over a year ago

No problem. Glad this helped you out.

Collectives™ on Stack Overflow

Execute custom functions one after another - Callback logic in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related