Is it possible to string together requests in a Vue method?

Question

Is it possible to string together requests in a Vue method?

Whenever a user clicks on a specific button, a request is sent to the server and an answer is received. If the user clicks on this button 100 times, I want to send 100 consecutive requests to the server. Each request must be sent after the previous one, as the response from the previous request is required for the next one.

For example:


        <button @click="sendRequest">send</button>

        methods:{

            sendRequest:function(){

                axios.post('https:/url/store-project-item', {
                    'id': this.project.id,
                    "items": this.lists,
                    'labels': this.labels,
                    'last_update_key': this.lastUpdateKey,
                    'debug': 'hYjis6kwW',
                }).then((r) => {
                    if (r.data.status) {
                        this.change = false;
                        this.lastUpdateKey = r.data.lastUpdateKey;
                        this.showAlert('success');
                    } else {
                        if (r.data.state == "refresh") {
                            this.showAlert('error');
                            this.getProject();
                        } else {
                            this.showAlert('error');
                        }
                    }
                }).catch(() => {
                    this.showAlert('error');
                });
            }
        }

javascript vue.js vuejs3

Answer 1

Answer №1

I have a useful higher-order function called withMaxDOP (DOP = degrees-of-parallelism) that I use for scenarios like this:

const withMaxDOP = (f, maxDop) => {
  const [push, pop] = createAsyncStack();
  for (let x = 0; x < maxDop; ++x) {
    push({});
  }
  return async(...args) => {
    const token = await pop();
    try {
      return await f(...args);
    } finally {
      push(token);
    }
  };
};

This function relies on an async stack data structure (you can find the implementation in the provided demo), in which the pop function is asynchronous and will only resolve when there is an item available to be consumed. maxDop tokens are initially placed in the stack. Before executing the given function, a token is taken from the stack, potentially waiting if no token is immediately accessible. Once the supplied function finishes, the token is put back into the stack. This effectively controls the concurrent calls to the given function based on the number of tokens present in the stack.

You can apply this function to wrap a promise-returning (async) function and restrict re-entrancy into that function.

In your situation, you could utilize it as demonstrated below:

sendRequest: withMaxDOP(async function(){ /*await axios.post...*/ }, 1)

to ensure that one call to this function never overlaps with another.

Demo:

const createAsyncStack = () => {
  const stack = [];
  const waitingConsumers = [];
  const push = (v) => {
    if (waitingConsumers.length > 0) {
      const resolver = waitingConsumers.shift();
      if (resolver) {
        resolver(v);
      }
    } else {
      stack.push(v);
    }
  };
  const pop = () => {
    if (stack.length > 0) {
      const queueItem = stack.pop();
      return typeof queueItem !== 'undefined' ?
        Promise.resolve(queueItem) :
        Promise.reject(Error('unexpected'));
    } else {
      return new Promise((resolve) => waitingConsumers.push(resolve));
    }
  };
  return [push, pop];
};
const withMaxDOP = (f, maxDop) => {
  const [push, pop] = createAsyncStack();
  for (let x = 0; x < maxDop; ++x) {
    push({});
  }
  return async(...args) => {
    const token = await pop();
    try {
      return await f(...args);
    } finally {
      push(token);
    }
  };
};
// example usage
const delay = (duration) => {
  return new Promise((resolve) => setTimeout(() => resolve(), duration));
};
async function doSomething(name) {
  console.log("starting");
  // simulate async IO
  await delay(1000);
  const ret = `hello ${name}`;
  console.log(`returning: ${ret}`);
  return ret;
}
const limitedDoSomething = withMaxDOP(doSomething, 1);
//call limitedDoSomething 5 times
const promises = [...new Array(5)].map((_, i) => limitedDoSomething(`person${i}`));
//collect the resolved values and log
Promise.all(promises).then(v => console.log(v));

Answer 2

I have a useful higher-order function called withMaxDOP (DOP = degrees-of-parallelism) that I use for scenarios like this:

const withMaxDOP = (f, maxDop) => {
  const [push, pop] = createAsyncStack();
  for (let x = 0; x < maxDop; ++x) {
    push({});
  }
  return async(...args) => {
    const token = await pop();
    try {
      return await f(...args);
    } finally {
      push(token);
    }
  };
};

This function relies on an async stack data structure (you can find the implementation in the provided demo), in which the pop function is asynchronous and will only resolve when there is an item available to be consumed. maxDop tokens are initially placed in the stack. Before executing the given function, a token is taken from the stack, potentially waiting if no token is immediately accessible. Once the supplied function finishes, the token is put back into the stack. This effectively controls the concurrent calls to the given function based on the number of tokens present in the stack.

You can apply this function to wrap a promise-returning (async) function and restrict re-entrancy into that function.

In your situation, you could utilize it as demonstrated below:

sendRequest: withMaxDOP(async function(){ /*await axios.post...*/ }, 1)

to ensure that one call to this function never overlaps with another.

Demo:

const createAsyncStack = () => {
  const stack = [];
  const waitingConsumers = [];
  const push = (v) => {
    if (waitingConsumers.length > 0) {
      const resolver = waitingConsumers.shift();
      if (resolver) {
        resolver(v);
      }
    } else {
      stack.push(v);
    }
  };
  const pop = () => {
    if (stack.length > 0) {
      const queueItem = stack.pop();
      return typeof queueItem !== 'undefined' ?
        Promise.resolve(queueItem) :
        Promise.reject(Error('unexpected'));
    } else {
      return new Promise((resolve) => waitingConsumers.push(resolve));
    }
  };
  return [push, pop];
};
const withMaxDOP = (f, maxDop) => {
  const [push, pop] = createAsyncStack();
  for (let x = 0; x < maxDop; ++x) {
    push({});
  }
  return async(...args) => {
    const token = await pop();
    try {
      return await f(...args);
    } finally {
      push(token);
    }
  };
};
// example usage
const delay = (duration) => {
  return new Promise((resolve) => setTimeout(() => resolve(), duration));
};
async function doSomething(name) {
  console.log("starting");
  // simulate async IO
  await delay(1000);
  const ret = `hello ${name}`;
  console.log(`returning: ${ret}`);
  return ret;
}
const limitedDoSomething = withMaxDOP(doSomething, 1);
//call limitedDoSomething 5 times
const promises = [...new Array(5)].map((_, i) => limitedDoSomething(`person${i}`));
//collect the resolved values and log
Promise.all(promises).then(v => console.log(v));

Is it possible to string together requests in a Vue method?

Answer №1

Similar questions

What is the best way to select just the innermost row of a nested table for emphasis?

I just installed Electron on my Mac using the command 'sudo npm install electron -g', but now I am encountering an error. How can I resolve this issue

Form input using the div element (when clicked)

A function designed to detect errors based on the parameters supplied as arguments

Is it possible to customize the close icons on the autocomplete feature in Material UI?

Client event triggered twice by server

Waiting for multiple asynchronous calls in Node.js is a common challenge that many developers

Firebase Error: Page Not Found

Creating a Consistent Look for Italic Font Formatting in Tailwind

In AngularJS, I've created a collection of checkboxes with a submit button ready to go

Using an AJAX function to retrieve data from two different server-side scripts and populate two separate HTML elements on the page

When using node.js and express, attempting to send an email with the packages 'nodemailer' and 'nodemailer-handlebars' may result in a TypeError being thrown, specifically [ERR_INVALID_ARG_TYPE]

[Vue Alert]: Render Error - "TypeError: Unable to retrieve the 'getters' property of an undefined object"

The $.Get method does not retain its value within an each() loop

The combination of html2canvas and jsPDF does not function properly in a Vue CLI application

Guide to creating standalone Express middleware that can interact with the raw request body

Troubleshooting Vue component reactivity problems with async server requests

Dynamic cell loading in Vue using Vuetify's datatable functionality

JavaScript Email Verification

Guide on integrating AJAX and coding in WordPress using PHP