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

The problem with utilizing the Node `util.inherits` method

How can I set a header to be automatically included in every "render" response in Node.js/Express?

Sleek dialog sliding animation with Svelte

Isotope: Real-time JSON content extracted from Google Spreadsheet

Having difficulty accessing data in a JavaScript file within Odoo 9 platform

Is there a method to run code in the parent class right after the child constructor is called in two ES6 Parent-Child classes?

Vuex 3: The State Remains Unknown

Difficulty with linking a CSS property to an HTML element using JavaScript

Retrieve the script's location from the server prior to the initialization of Angular

Combining an AJAX POST within a JSON GET request

Preventing autoscrolling in Ionic's dual side menu template when additional content is added

Error in jQuery when element is not found

What is the best way to configure a metered subscription plan on Stripe that invoices annually but bills extra fees for overage on a monthly basis

Challenge with Angular *ngFor: Struggling to Access Previous Elements

Incorporating Vue 3 with Transition and KeepAlive nested within RouterView

Determine the presence of either one or both values in a JavaScript object

What is the best way to display only the current != wanted lines when using "npm outdated"?

Choosing Select2: Customizing the context of formatSelection

What is the best way to position a rectangle on top of a div that has been rendered using

Setting up Karma configuration to specifically exclude nested directories