Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

Question

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

I have a task that requires me to make requests to 4 different places in the onmounted function using the composition api. I want to send these requests simultaneously with promises for better performance. Can anyone guide me on how to achieve this efficiently using Kodar?

 onMounted(async () => {
  const [error, res] = await ExApiService.get("exit-city");
  if (error) ErrorPopup(error);
  else {
    exitCityId.value = res.data;
  }
  const [err, resp] = await ExApiService.get("destination-city");
  if (err) ErrorPopup(err);
  else {
    destinationCityId.value = resp.data;
  }
  const [er, re] = await ExApiService.get("destination-warehouse");
  if (er) ErrorPopup(er);
  else {
    destinationWarehouseId.value = re.data;
  }
  const [e, r] = await ExApiService.get("expense-detail");
  if (e) ErrorPopup(e);
  else {
    expenseDetail.value = r.data;
  }
});

javascript typescript vue.js

Answer 1

Answer №1

When coding in JavaScript, the await keyword plays a crucial role in waiting for promises to be fulfilled before progressing with the code execution. (refer to documentation)

If you find yourself in a situation where you need to handle multiple asynchronous requests without using the await keyword, an alternative approach is to utilize Promise.all. By employing Promise.all, you can streamline your code and efficiently manage multiple requests. (see official documentation)

Incorporating this technique into your code involves restructuring it as follows:

 onMounted(async () => {

  const fulfilled = await Promise.all([
        ExApiService.get("exit-city"),
        ExApiService.get("destination-city"),
        ExApiService.get("destination-warehouse"),
        ExApiService.get("expense-detail")
    ]);
    
  });

By using Promise.all in this manner, all specified requests will be executed concurrently, enhancing the efficiency of your code. Notably, error handling becomes more straightforward when leveraging Promise.all, as any rejection within the promises will result in the entire expression throwing an error, as per the documented behavior:

Utilizing Promise.all aligns with best practices, particularly due to its intuitive error handling mechanism—should any promise reject, the overall outcome becomes unavailable, triggering an exception in the await process.

I trust that this explanation proves beneficial for your implementation.

Answer 2

When coding in JavaScript, the await keyword plays a crucial role in waiting for promises to be fulfilled before progressing with the code execution. (refer to documentation)

If you find yourself in a situation where you need to handle multiple asynchronous requests without using the await keyword, an alternative approach is to utilize Promise.all. By employing Promise.all, you can streamline your code and efficiently manage multiple requests. (see official documentation)

Incorporating this technique into your code involves restructuring it as follows:

 onMounted(async () => {

  const fulfilled = await Promise.all([
        ExApiService.get("exit-city"),
        ExApiService.get("destination-city"),
        ExApiService.get("destination-warehouse"),
        ExApiService.get("expense-detail")
    ]);
    
  });

By using Promise.all in this manner, all specified requests will be executed concurrently, enhancing the efficiency of your code. Notably, error handling becomes more straightforward when leveraging Promise.all, as any rejection within the promises will result in the entire expression throwing an error, as per the documented behavior:

Utilizing Promise.all aligns with best practices, particularly due to its intuitive error handling mechanism—should any promise reject, the overall outcome becomes unavailable, triggering an exception in the await process.

I trust that this explanation proves beneficial for your implementation.

Answer 3

Answer №2

Consider using either Promise.all() or Promise.allSettled() to handle multiple asynchronous requests simultaneously.

An alternative approach with Promise.allSettled() would be as follows:

onMounted(async() => {
  const promises = [
    ExApiService.get("exit-city"),
    ExApiService.get("destination-city"),
    ExApiService.get("destination-warehouse"),
    ExApiService.get("expense-detail"),
  ];
  const settleds = await Promise.allSettled(promises);
  const errors = settled.filter(sp => sp.status === "rejected");
  errors.forEach(sp => ErrorPopup(sp.reason));
 
  [
    exitCityId.value, 
    destinationCityId.value, 
    destinationWarehouseId.value, 
    expenseDetail.value
  ] = settleds.map(ps => ps.value?.data);
});

Answer 4

Consider using either Promise.all() or Promise.allSettled() to handle multiple asynchronous requests simultaneously.

An alternative approach with Promise.allSettled() would be as follows:

onMounted(async() => {
  const promises = [
    ExApiService.get("exit-city"),
    ExApiService.get("destination-city"),
    ExApiService.get("destination-warehouse"),
    ExApiService.get("expense-detail"),
  ];
  const settleds = await Promise.allSettled(promises);
  const errors = settled.filter(sp => sp.status === "rejected");
  errors.forEach(sp => ErrorPopup(sp.reason));
 
  [
    exitCityId.value, 
    destinationCityId.value, 
    destinationWarehouseId.value, 
    expenseDetail.value
  ] = settleds.map(ps => ps.value?.data);
});

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

Answer №1

Answer №2

Similar questions

Creating multiple tabs in PHP using the header function can be achieved by specifying the location in

Why is it displaying undefined even though there is data stored in Firebase?

Ways to determine the presence of a value in an array

Using jQuery, is there a way to move an element from one div to another, but only if the destination div is currently empty

Changes in query parameters on NextJS navigation within the same page do not activate hooks

Interactive loading of datalist choices using AJAX in the Firefox browser

Performing a modulo operation within a v-for loop

Validating numbers in React JS input fields component

The timestamp will display a different date and time on the local system if it is generated using Go on AWS

Using Vue 2 with a personalized Axios setup, integrating Vuex, and incorporating Typescript for a robust

Strange behavior observed when transclusion is used without cloning

How do I modify the local settings of the ngx-admin datepicker component to show a Turkish calendar view?

JavaScript - Retrieve the name of an object from a separate array

AngularFire 2 dispatching email for password reset

Checking for the presence of text within a span tag - a simple guide

Add a fresh record only if it contains information and there are no existing duplicates present

Triggering JSON schema validation event in React's Monaco Editor

Is there a way to flip a figure that is flipped upside down?

Issue encountered during installation of react-masonry-css using npm

Testing Jest with NodeJS involves simulating input from standard input (stdin)