
サーバ側の更新をブラウザ側で検知するため、数秒ごとにリクエストするループを書きました。
また、取得したデータから条件によってそのループを抜ける処理も追加します。



**async/await**とライブラリの**axios**を利用します。

また、同様の処理は**Webhook**を調べて利用された方がよさそうです。

- [Webhookとは？ - Qiita](https://qiita.com/soarflat/items/ed970f6dc59b2ab76169)

## axios

HTTPリクエストは[axios](https://github.com/axios/axios)を利用しています。

エラー時のリトライは[axios-retry](https://www.npmjs.com/package/axios-retry)が使いやすいかと。


## 目的のループ処理

目的の処理の手順は以下です。

1. レスポンスが一定の条件 or 繰り返し数まで以下を実行
   1. HTTPリクエスト
   2. レスポンスを判定
      1. 真ならループを抜ける
   3. １秒待機
2. 終わりの処理

下記の記事で実現できそうですが、しっかりと理解できなかったため自作しました。

- [axiosでget後に特定条件時にリトライするように実装してみた](https://qiita.com/kai_kou/items/0f6890fa4eb0f7062789)

## axiosで数秒ごとにリクエストする処理

まず、[async-awaitでもforEachしたい！](https://qiita.com/jkr_2255/items/62b3ee3361315d55078a)の「シンプルなやり方には罠がある」のソースを拡張して数秒ごとにリクエストする処理を作成します。
> ```js
> const testFunc = async () => {
>   for(let item of arr) await sleptLog(item);
>   console.log('done!')
> };
> ```

```js
const numOfTime = 5; // ループ数
const delay = 1000; // スリーブ時間 ms
let response = null; // 結果


// スリーブ
function sleep(time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, time);
    });
}

// ループ
const loopFunc = async (delay, numOfTime) => {
    const arr = Array.from({length: numOfTime}, (v, k) => k);
    for(let i of arr){
        await axios.get('https://www.google.com') // URLは任意
            .then(function (response) {
                console.log(i, response);
                return Promise.resolve(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        await sleep(delay);
    } 
};
loopFunc(delay, numOfTime).then(()=>{
    console.log('done!!');
});
```

これで、`numOfTime`回`delay`秒ごとにリクエストする処理がかけました。

## 途中でループを抜ける

`loopFunc`の中で`return Promise.resolve(1);`を使うとループを抜けられました。
よって、条件を追加してループを抜ける処理を書きます。

```js
const numOfTime = 5; // ループ数
const delay = 1000; // スリーブ時間 ms
let response = null; // 結果

// 条件
const judge = function(data) {
    // 何かしらの条件
    if(response.code == 'OK') return true;
    return false;
};

// スリーブ
function sleep(time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, time);
    });
}

// ループ
const loopFunc = async (delay, numOfTime, judge) => {
    const arr = Array.from({length: numOfTime}, (v, k) => k);
    for(let i of arr){
        await axios.get('https://www.google.com') // URLは任意
            .then(function (response) {
                console.log(i, response);
                return Promise.resolve(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        // 条件処理を追加
        if(judge(responce)){
            return Promise.resolve(1);
        }
        await sleep(delay);
    } 
};
loopFunc(delay, numOfTime, judge).then(()=>{
    console.log('done!!');
});
```
これで`judge(responce)`の結果によってループを抜けることができます。

## 参考

- [axios](https://github.com/axios/axios)
- [axiosでget後に特定条件時にリトライするように実装してみた](https://qiita.com/kai_kou/items/0f6890fa4eb0f7062789)
- [async-awaitでもforEachしたい！](https://qiita.com/jkr_2255/items/62b3ee3361315d55078a)
- [async/awaitを使った非同期処理の書き方 - 30歳からのプログラミング](https://numb86-tech.hatenablog.com/entry/2017/10/08/192300)

axiosで数秒ごとにリクエストするループとループを抜ける処理 | JavaScript