javascript - promise all (vue.js)

한번에 여러개의 api를 비동기적으로 받아오고 싶을때 promise all을 사용할 수 있다.

즉, api의 reponse들이 다른 api값을 호출하는데 필요하다던지하는 영향이 없을때 사용하면 효과적이다

이미지 출처 블로그

promise.any() & promise.all()

promise.any

promise.any는 가장먼저 resolve된 하나의 promise를 반환하고 모든 호출이 실패했을때 reject된다

MDN - promise.any

promise.all

promise.all은 모든 모든 프로미스가 fulfilled되고 나면 하나라도 실패하는 프로미스가 있을경우 reject되고
모든 프로미스 호출이 성공하는 경우 resolve된다.

MDN - promise.all

사용방법

📃 store.js

// moudle import
import cond1Module, { Types as cond1Types } from '../cond1Module';
import cond2Module, { Types as cond2Types } from '../cond2Module';

// vuex - actions
const actions = {
  // 초기 API호출
  async [Types.actions.FETCH]({dispatch, commit, rootState}) {
    // promise 반환
    return new Promise((resolve, reject) => {
      let cond1Promises = [];
      let cond2Promises = [];
      // 조건에 따라 api불러와야 하는 목록 생성 
      if(isCond1) {
        // 조건1일때
        const cond1Promise1 = dispatch(`cond1Module/${cond1Types.actions.FETCH1}`);
        const cond1Promise2 = dispatch(`cond1Module/${cond1Types.actions.FETCH2}`);
        cond1Promises = [cond1Promise1, cond1Promise2];
      } else {
        // 조건2일때
        const cond2Promises1 = dispatch(`cond2Module/${cond2Types.actions.FETCH1}`);
        const cond2Promises2 = dispatch(`cond2Module/${cond2Types.actions.FETCH2}`);
        const cond2Promises3 = dispatch(`cond2Module/${cond2Types.actions.FETCH3}`);
        cond2Promises = [cond2Promises1, cond2Promises2, cond2Promises3];
      }

      // parallel promises
      const callPromises = isCond1 ? cond1Promises : cond2Promises;
      // promise.all로 불러야할 api들 호출
      Promise.all(callPromises).then(() => {
        resolve();
      }).catch(err => {
        console.log(err);
        reject();
      });
    
    });
  },
};

export default new Vuex.Store({
  // 모듈들을 적어주어야 함
  modules: {
    cond1Module, 
    cond2Module, 
  },
  state,
  getters,
  actions,
  mutations,
});