javascript - Vue: Best practices for handling multiple API calls - Stack Overflow

admin管理员组

文章数量:1277281

I found myself making more than one API call in my vuex action and this let me to wonder what would be the best way to handle this situations, the best practices for multiple API calls, let's begin with the code I have.

I have an action where I gather all posts and all post categories from different API endpoints (Laravel for backend), I'm sure there's have to be a better way to handle this than how I'm doing it:

fetchAllPosts ({ mit }) {

        mit( 'SET_LOAD_STATUS', 1);
        axios.get('/posts')
        .then((response) => {
            mit('FETCH_ALL_POSTS',  response.data.posts )
            mit( 'SET_LOAD_STATUS', 2 );
        }, 
        (error) => {
            console.log(error);
            mit( 'SET_LOAD_STATUS', 3 );
        })
        axios.get('/postcategories')
        .then((response) => {
            mit('FETCH_ALL_POSTCATEGORIES',  response.data.postcategories )
            mit( 'SET_LOAD_STATUS', 2 );
        }, 
        (error) => {
            console.log(error);
            mit( 'SET_LOAD_STATUS', 3 );
        })
    },

I found myself making more than one API call in my vuex action and this let me to wonder what would be the best way to handle this situations, the best practices for multiple API calls, let's begin with the code I have.

I have an action where I gather all posts and all post categories from different API endpoints (Laravel for backend), I'm sure there's have to be a better way to handle this than how I'm doing it:

fetchAllPosts ({ mit }) {

        mit( 'SET_LOAD_STATUS', 1);
        axios.get('/posts')
        .then((response) => {
            mit('FETCH_ALL_POSTS',  response.data.posts )
            mit( 'SET_LOAD_STATUS', 2 );
        }, 
        (error) => {
            console.log(error);
            mit( 'SET_LOAD_STATUS', 3 );
        })
        axios.get('/postcategories')
        .then((response) => {
            mit('FETCH_ALL_POSTCATEGORIES',  response.data.postcategories )
            mit( 'SET_LOAD_STATUS', 2 );
        }, 
        (error) => {
            console.log(error);
            mit( 'SET_LOAD_STATUS', 3 );
        })
    },

First issue with my approach that I can think of is if the first API call fails but the second succeeds I will get a load status of 2 (2 equals success here) !

I only want to proceed with the mits if BOTH the first and second API call correctly fetch the data.

• javascript
• php
• laravel
• vue.js

Share Improve this question Follow edited Mar 21, 2023 at 0:26 halfer 20.5k1919 gold badges109109 silver badges202202 bronze badges asked Nov 22, 2018 at 21:23 gabogabansgabogabans 3,55199 gold badges5050 silver badges110110 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I think you may want to read about promises.

On your example you are using Axios, which is a Promise based HTTP Client and that's great.

With Promises you can do several requests, and when all requests are successful you can THEN execute code.

With Axios you can do that with .all like this:

axios.all([getPosts(), getPostCategories()])
  .then(axios.spread(function (posts, categories) {
     // Both requests are now plete
  }));

axios.all([
    axios.get(firstUrl),
    axios.get(secondUrl)
])
.then(axios.spread(function (response1, response2) {
    //response1 is the result of first call
    //response2 is the result of second call
}))
.catch(function (error) {

});

Note about catch(): It is called on the first failing request omitting the rest of the calls. So if the first call fails, catch() is called without even making the second request.

本文标签： javascriptVue Best practices for handling multiple API callsStack Overflow