Nuxt.js + JavaScript로 익스포넨셜 백 오프 구현

주제

프로젝트 만들기

yarn create nuxt-app exponential-backoff-sample
yarn create v1.22.4
[1/4] Resolving packages...
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-nuxt-app

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in exponential-backoff-sample
? Project name exponential-backoff-sample
? Project description My praiseworthy Nuxt.js project
? Author name author
? Choose programming language JavaScript     
? Choose the package manager Yarn     
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

�  Successfully created project exponential-backoff-sample

  To get started:

        cd exponential-backoff-sample
        yarn dev

  To build & start for production:

        cd exponential-backoff-sample
        yarn build
        yarn start

구현

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <div class="text-center">
        <logo />
        <vuetify-logo />
      </div>
      <v-card>
        <v-card-title class="headline">
          exponential-backoff-sample
        </v-card-title>
        <v-card-text>
          正：{{ judgeBaseNum }}<br />
          ランダム数字{{ judgeNum }}<br /><br />
          最大リトライ回数：{{ maxRetryNum }}<br />
          リトライ回数：{{ retryNum }}<br />
          リトライ間隔：{{ retryInterval }}
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" @click="retry">
            Retry
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>
<script>
import Logo from "~/components/Logo.vue";
import VuetifyLogo from "~/components/VuetifyLogo.vue";

export default {
  data() {
    return {
      retryNum: 0,
      retryInterval: 100,
      judgeBaseNum: 1,
      judgeNum: 0,
      maxRetryNum: 5
    };
  },
  components: {
    Logo,
    VuetifyLogo
  },
  methods: {
    // メイン処理
    async retry() {
      // 進捗リセット
      this.retryNum = 0;
      this.retryInterval = 100;
      while (this.retryNum < this.maxRetryNum) {
        this.retryNum++;
        this.judge();
        if (this.judgeNum === this.judgeBaseNum) {
          break;
        }
        // スリープ処理
        this.retryInterval = this.retryNum * 100 + this.retryInterval;
        await this.sleep(this.retryInterval);
      }
    },
    // ランダム数字生成
    judge() {
      const random = Math.ceil(Math.random() * 6);
      this.judgeNum = random;
    },
    // スリープ
    sleep(milliseconds) {
      return new Promise(resolve => setTimeout(resolve, milliseconds));
    }
  }
};
</script>

재시도 처리

// スリープ処理
this.retryInterval = this.retryNum * 100 + this.retryInterval;
await this.sleep(this.retryInterval);

동작 확인

yarn dev
yarn run v1.22.4
$ nuxt

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.12.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

i Preparing project for development
i Initial build may take a while
√ Builder initialized
√ Nuxt files generated

√ Client
  Compiled successfully in 10.40s

√ Server
  Compiled successfully in 9.19s

i Waiting for file changes
i Memory usage: 348 MB (RSS: 443 MB)
i Listening on: http://localhost:3000/

결론