schedule2019-05-24

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

JavaScriptaxios

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

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

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

Webhookとは？ - Qiita

axios

HTTPリクエストはaxiosを利用しています。

エラー時のリトライはaxios-retryが使いやすいかと。

目的のループ処理

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

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

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

axiosでget後に特定条件時にリトライするように実装してみた

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

まず、async-awaitでもforEachしたい！の「シンプルなやり方には罠がある」のソースを拡張して数秒ごとにリクエストする処理を作成します。

const testFunc = async () => {
  for(let item of arr) await sleptLog(item);
  console.log('done!')
};

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);を使うとループを抜けられました。よって、条件を追加してループを抜ける処理を書きます。

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!!');
});