Vuex의 작업 방법 지연 시뮬레이션

Vuex의 작업 방법 지연 시뮬레이션

저는 아직 개발 중인 백엔드의 Vue 어플리케이션을 쓰고 있습니다.이러한 이유로 나는 인위적인 지연을 행동에 추가하고 싶다.예를 들어 내가 제출하면sign in지연 1초를 추가하고 메인 어플리케이션으로 리다이렉트 합니다.

구성 요소에서 제출 메서드입니다.

onSubmit() {
  this.loading = true;
  this.$store.dispatch('auth/signIn', this.credentials).then(() => {
    this.loading = false;
  });
}

액션 사인인 메서드는 다음과 같습니다.

  async signIn({ commit }, credentials) {
    const result = await authService.signIn(credentials);
    await commit(AUTHENTICATE, {
      authenticated: result
    });
  }

보시다시피 authService라고 부릅니다.타임아웃 블록을 작성한 메서드는 동작하지 않고 서비스는 반환됩니다.undefined

  async signIn(credentials) {
    setTimeout(() => {
      console.log('credentials', credentials);
      return true;
    }, 2000);
  }

수리하는 것 좀 도와주시겠어요?

이게 제가 지연을 위해 사용한 거예요.https://alesbubblesort.netlify.app/main.js 파일을 확인합니다.

sleepFunction(time) {
        return new Promise(resolve => setTimeout(resolve, time));
  }

signIn 메서드에서 아무것도 반환하지 않으며 setTimeout은 코드 실행을 차단하지 않습니다.

블로킹 타임아웃을 하고 싶은 경우,delay()방법은 다음과 같습니다.

function delay(time = 2500) {
  return new Promise((resolve) => {
    setTimeout(resolve, time)
  })
}

디폴트로는 2.5초간 대기합니다.

여기서 바닐라 JS의 작업 예를 볼 수 있습니다.

언급URL : https://stackoverflow.com/questions/63864083/simulate-delay-in-vuexs-action-method