Issue arising due to incorrect array index placement following the axios request

Question

Issue arising due to incorrect array index placement following the axios request

I am currently utilizing vue js and axios for my project.

Here is the challenge I am facing:

Typically, my "outlines" array contains anywhere from 3 to 9 entries. I want to send an axios request (runSecondFunction()) for each entry, but execute only one request at a time (waiting for each record to be fetched before starting the next request, instead of all at once). In case any of the requests fail, display an error message. While the current setup works, some requests finish before others leading to incorrect index positions in the response.

method1(){
       for (const [index, value] of this.splitOutlines.entries()) {
          this.runSecondFunction(value, index);
             }
             }

    runSecondFunction(value, index){
           let formData = {
                    title: this.blog.value,
                    subheading: value
                };
                axios.post('/dashboard/paragraphs', formData).then((response) => {
                    this.articles.push({
                        index: index,
                        subheading: response.data.subheading,
                        paragraph: response.data.data.ideas[0],
                    });
                }).catch(error => {
                     //
                });
    }

If you have any insights on how to achieve this, I would greatly appreciate it.

Thank you

javascript vue.js vuejs2

Answer 1

Answer №1

If you are insistent on preventing these processes from running concurrently, there are a couple of options available to you. One approach is to have method1 call an async function and wrap it in a try-catch block while creating a new array to store the results before returning or assigning it elsewhere. For example:

method1(){
   (async function () {
     const requests = []
     for (const [index, value] of this.splitOutlines.entries()) {
       try {
         const res = await this.runSecondFunction(value, index);
         requests.push(res)
       } catch (e) {
         requests.push(e)
       }
     }
    return requests
    )().then(reqs => {
       // perform additional actions with the completed requests.
    })

}

This approach ensures that the order of requests is preserved and only one request is processed at a time.

Alternatively, you may need to implement a recursive solution within the .then method.

EDIT::

I neglected to mention that in your runSecondFunction method, you must return the promise, as shown below:

runSecondFunction(value, index){
    let formData = {
        title: this.blog.value,
        subheading: value
    };
    return axios.post('/dashboard/paragraphs', formData)

}

In this way, the await statement in mehtod1 will assign the result to the variable

res</code (which can be manipulated as needed).</p>
<p>However, avoid handling errors within <code>runSecondFunction

if you want them to be included in the result array.

Answer 2

If you are insistent on preventing these processes from running concurrently, there are a couple of options available to you. One approach is to have method1 call an async function and wrap it in a try-catch block while creating a new array to store the results before returning or assigning it elsewhere. For example:

method1(){
   (async function () {
     const requests = []
     for (const [index, value] of this.splitOutlines.entries()) {
       try {
         const res = await this.runSecondFunction(value, index);
         requests.push(res)
       } catch (e) {
         requests.push(e)
       }
     }
    return requests
    )().then(reqs => {
       // perform additional actions with the completed requests.
    })

}

This approach ensures that the order of requests is preserved and only one request is processed at a time.

Alternatively, you may need to implement a recursive solution within the .then method.

EDIT::

I neglected to mention that in your runSecondFunction method, you must return the promise, as shown below:

runSecondFunction(value, index){
    let formData = {
        title: this.blog.value,
        subheading: value
    };
    return axios.post('/dashboard/paragraphs', formData)

}

In this way, the await statement in mehtod1 will assign the result to the variable

res</code (which can be manipulated as needed).</p>
<p>However, avoid handling errors within <code>runSecondFunction

if you want them to be included in the result array.

Answer 3

Answer №2

Instead of pushing an error object into the array, another option is to directly assign it to a property of the articles object.

axios.post('/dashboard/paragraphs', formData).then((response) => {
    this.articles.push({
        index: index,
        subheading: response.data.subheading,
        paragraph: response.data.data.ideas[0],
    });
}).catch(error => {
    this.articles.push({ error });
});

Alternatively, you could transform the articles array into a plain object and assign values to properties within that object instead of using push method.

axios.post('/dashboard/paragraphs', formData).then((response) => {
    this.articles[index] = {
        index: index,
        subheading: response.data.subheading,
        paragraph: response.data.data.ideas[0],
    }
}).catch(error => {

Answer 4

Instead of pushing an error object into the array, another option is to directly assign it to a property of the articles object.

axios.post('/dashboard/paragraphs', formData).then((response) => {
    this.articles.push({
        index: index,
        subheading: response.data.subheading,
        paragraph: response.data.data.ideas[0],
    });
}).catch(error => {
    this.articles.push({ error });
});

Alternatively, you could transform the articles array into a plain object and assign values to properties within that object instead of using push method.

axios.post('/dashboard/paragraphs', formData).then((response) => {
    this.articles[index] = {
        index: index,
        subheading: response.data.subheading,
        paragraph: response.data.data.ideas[0],
    }
}).catch(error => {

Issue arising due to incorrect array index placement following the axios request

Answer №1

Answer №2

Similar questions

Issue with image magnification on Internet Explorer 9 using the Cloud Zoom plugin extension for Joomla

Can the execution of one endpoint in a Node.js Express API prevent access to another endpoint?

What is the best way to display an image in Vuetify when the URL is found within my filtered array?

Issues with Angularjs in production when used with Rails

When located at the bottom of a page, the Div element fails to display

Employing the findOne method repeatedly in a loop can significantly slow down operations in Node.js

Angular directive and the concept of isolating scopes

Is it possible to halt component rendering with Composition in VueJS?

Executing an Ajax call to trigger a NodeJS function that executes a bash script

Incorporating an external Angular.js library into a Vue.js Single File Component

Vue inexplicably fails to remove correct component from the list

Understanding the fundamentals of event handling in JavaScript

Utilizing factory service within a decorator in AngularJS

Transitioning between modals using Tabler/Bootstrap components in a ReactJS environment

Experiencing issues and alerts when handling JSON data

Displaying a div and ensuring it remains visible upon clicking

Identify distinct prefixes and eliminate them from an array of strings

Illustrative demonstration of Vue with TypeScript

Chat box custom scrollbar always positioned at the bottom

An error will occur if you try to modify the state of a component from outside the component