Using a series of nested axios requests to retrieve and return data

Question

Using a series of nested axios requests to retrieve and return data

Currently, I am utilizing Vue and executing multiple calls using axios. However, I find the structure of my code to be messy and am seeking alternative approaches. While my current implementation functions as intended, I believe there might be a more efficient way to organize it. Therefore, I would greatly appreciate any insights or suggestions on how to improve it.

I feel like my existing setup is convoluted, and I am inclined to explore better alternatives:

login: function() {
    this.toggleLoading();

    this.findUser().then(success => {
        if(success) {
            this.validateSomething().then(success => {
                if(success) {
                    this.auth();
                }
            });
        }
    });
}

The methods findUser and validateSomething are currently structured as follows:

findUser: function() {
    return axios
    .post('/find-user', {
        id: this.id
    })
    .then(response => {
        if(response.data.success) {
            return true;
        } else {
            this.addErrors(response.data.message);
            this.toggleLoading();
            return false;
        }
    })
    .catch(this.catchAll)
},

I prefer not to merge the findUser and validateSomething functions so that I can utilize them independently.

However, my goal is to achieve a structure similar to this instead:

login: function() {

    this.toggleLoading();

    if(!this.findUser()) {
        return false;
    }

    if(this.validateSomething()) {
        this.auth();
    }
}

Can anyone provide recommendations regarding best practices for this specific scenario?

javascript vue.js axios

Answer 1

Answer №1

If you prefer promises over async/await, there is a way to clean up your code without nesting them excessively.

Instead of chaining promises like this:

login: function() {
    this.toggleLoading();

    this.findUser().then(success => {
        if(success) {
            this.validateSomething().then(success => {
                if(success) {
                    this.auth();
                }
            });
        }
    });
}

You can streamline it by chaining the promises like so:

login: function() {
  this.toggleLoading();

  this.findUser()
    .then(success => {
      if (success) {
        return this.validateSomething();
      }
      throw new Error('unsuccessful login')
    })
    .then(success => {
      if (success) {
        return this.auth();
      }
      throw new Error('some other reason that it failed')
    })
    .then(success=>{
      return success
    })
    .catch(err=> handle(err))
}

TL;DR;

Promises (without async/await) are perfectly fine, but make sure to chain them properly using .then instead of nesting them as callbacks for cleaner and more efficient code.

Answer 2

If you prefer promises over async/await, there is a way to clean up your code without nesting them excessively.

Instead of chaining promises like this:

login: function() {
    this.toggleLoading();

    this.findUser().then(success => {
        if(success) {
            this.validateSomething().then(success => {
                if(success) {
                    this.auth();
                }
            });
        }
    });
}

You can streamline it by chaining the promises like so:

login: function() {
  this.toggleLoading();

  this.findUser()
    .then(success => {
      if (success) {
        return this.validateSomething();
      }
      throw new Error('unsuccessful login')
    })
    .then(success => {
      if (success) {
        return this.auth();
      }
      throw new Error('some other reason that it failed')
    })
    .then(success=>{
      return success
    })
    .catch(err=> handle(err))
}

TL;DR;

Promises (without async/await) are perfectly fine, but make sure to chain them properly using .then instead of nesting them as callbacks for cleaner and more efficient code.

Answer 3

Answer №2

Just like @canbax mentioned, remember to utilize the async method along with the keyword await. You can refer to the simple example provided below. The code will halt execution on each await until the promise is resolved.

login: async function() {
    this.toggleLoading();

    const bool = await this.findUser();

    const validated = await this.validateSomething();

    return this.auth();
}

Answer 4

Just like @canbax mentioned, remember to utilize the async method along with the keyword await. You can refer to the simple example provided below. The code will halt execution on each await until the promise is resolved.

login: async function() {
    this.toggleLoading();

    const bool = await this.findUser();

    const validated = await this.validateSomething();

    return this.auth();
}

Answer 5

Answer №3

For handling asynchronous tasks in JavaScript, you can leverage the power of async functions, a feature introduced in ES2017. By using the await keyword, you can effectively wait for the result of an async function to be resolved. Be sure to refer to the documentation for more information.

Answer 6

For handling asynchronous tasks in JavaScript, you can leverage the power of async functions, a feature introduced in ES2017. By using the await keyword, you can effectively wait for the result of an async function to be resolved. Be sure to refer to the documentation for more information.

Using a series of nested axios requests to retrieve and return data

Answer №1

TL;DR;

Answer №2

Answer №3

Similar questions

We could not find the requested command: nodejs-backend

Submitting a nested JSON object in an AJAX request

Angular Directives in Error

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

Learning the process of utilizing Json in Flot to create visually appealing graphs

The state variables of React components do not always retain their most recent value

React Error: Unable to iterate over this.state.descriptions

The VueJS app seems to be experiencing difficulties with rendering the content

Encountering the "TypeError: document.getElementById(...) is null" error message while utilizing react.js in conjunction with chart.js

Eliminate item from array based on certain criteria

Failed to cast value "undefined" to ObjectId in the "_id" path for the model "User"

Streamline the testing process to ensure compatibility with jQuery version 2.x

Adapt appearance according to the length of the text

This particular JavaScript function is only designed to operate on the initial input box in the provided

Show the user's chosen name in place of their actual identity during a chat

The problem of having an undefined state in Vuex arises

Do not fetch data again after a re-render

Converting JavaScript CanvasRenderingContext2D states array into a serialized format

Sort an array using another array as the reference in JavaScript

The function of jQuery's .prop('defaultSelected') appears to be unreliable when used in Internet Explorer 9