Creating multiple synchronous loops within a Vue component using JavaScript

Question

Creating multiple synchronous loops within a Vue component using JavaScript

I'm dealing with a JavaScript loop that processes data from an Excel file. The loop loops through the results and retrieves a list of PMIDs. If the PMIDList has more than 200 items, it needs to be split into segments of 200 for processing due to restrictions on the web service. This process works well, except when the PMIDList exceeds 200 items.

Due to restrictions on the web service where only 200 items can be processed at a time, I need to find a way to create an internal loop that extracts the first 200 items before looping back to handle the rest of the items. It would also be beneficial to perform this task synchronously to adhere to the service's limitation of three requests per second. Additionally, as Vue is being used in this project, managing wait times is another important consideration.

javascript vue.js

Answer 1

Answer №1

One simple approach is to incorporate async await in a while loop to modify the original array. Here's an example:

async function fetchFromApi(params) {
    let apiUrl = 'https://api.example.com/data?ids=' + params.join('')
    return axios.get(apiUrl)
}

You can then utilize this function within your inner while loop:


let idList = ids.split(',');
// Make a clone to avoid potential side effects of modifying the original array
const clonedIds = [...idList];
while(clonedIds.length) {
  const batch = clonedIds.splice(0, 199); // Modify array length with each iteration
  const response = await fetchFromApi(batch);
  // Process response data accordingly
}
...

Answer 2

One simple approach is to incorporate async await in a while loop to modify the original array. Here's an example:

async function fetchFromApi(params) {
    let apiUrl = 'https://api.example.com/data?ids=' + params.join('')
    return axios.get(apiUrl)
}

You can then utilize this function within your inner while loop:


let idList = ids.split(',');
// Make a clone to avoid potential side effects of modifying the original array
const clonedIds = [...idList];
while(clonedIds.length) {
  const batch = clonedIds.splice(0, 199); // Modify array length with each iteration
  const response = await fetchFromApi(batch);
  // Process response data accordingly
}
...

Creating multiple synchronous loops within a Vue component using JavaScript

Answer №1

Similar questions

What is the best way to switch an element's attributes using only JavaScript?

My attempt at deploying my personal React App project on Vercel was unsuccessful

How can I transfer data from a C# code to a JavaScript file in asp.net?

Exploring the combination of vuedraggable with transition groups and header slots

Revamping elements according to ordered array. Angular version 4.3

Amcharts does not display the percentage value

Server Components can only receive plain objects and select built-ins from Client Components. Any classes or null prototypes will not be compatible

Incorporating CSS into React.js applications

My browser is being overwhelmed by jQuery's each() function while trying to manipulate a large set of elements. How can I optimize my code to reduce the strain on my browser

Strategies for managing Shopify's API request restrictions with the microapps Node.js module

Reactjs button only responds on the second click instead of the first tap

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

Find the mean of two values entered by the user using JavaScript

distinguishing the container component from the presentational component within react native

Navigating Angular: Discovering Route Challenges in Less Than an Hour

What to do while waiting for MySQL query in an asynchronous function?

Is getElementById() returning null?

Unable to retrieve the most recent global variable value within the confirmation box

Exploring the optimal approach for distinguishing between numbers and strings in a JavaScript/Typescript class

Ionic, Angular - A component with two out of three inputs displaying undefined values