[Vuejs] API 비동기 다건 동시 호출, watch를 활용한 종료 시점 감지

Jinbro·2022년 7월 12일
0

Vuejs

목록 보기
4/9

watch 역할

전역변수의 변화를 감지하여 watch의 특정변수 영역에 정의된 로직을 수행한다.

watch를 활용한 다건 API 전체 종료 시점 감지

web browser에게 다건의 API 호출을 병렬적으로 동시에 일을 시킨 후,
모든 API 호출이 종료된 시점에 후처리 로직을 처리할 수 있다.

API 비동기 다건 동시 호출 참고 소스

// 화면 렌더링 완료 후
mounted() {
  // API 호출 함수 다건 동시 비동기 호출
  // 서버 네트워크 환경, 데이터에 따라 API 호출 종료 시점은 달라질 수 있음.
  this.callA();
  this.callB();
  this.callC();
},
methods: {
  callA() {
    ...
    this.doneA = true;
  },
  callB() {
    ...
    this.doneB = true;
  },
  callC() {
    ...
    this.doneC = true;
  },
  isCallApiAllFsh() {
    if (this.doneA && this.doneB && this.doneC) {
      console.log('api service is all finished!');
      // 후처리 로직 수행
    } else {
      console.log('api service is not finished yet...');
    }
  },
},

watch 샘플 소스

watch: {
  doneA() {
    this.isCallApiAllFsh();
  },
  doneB() {
    this.isCallApiAllFsh();
  },
  doneC() {
    this.isCallApiAllFsh();
  },
},
profile
자기 개발 기록 저장소

0개의 댓글