ローカル開発で通信中の状態を再現したい

ajax通信を行うWebサイトやアプリケーションの開発中に、ローカルのモックだとレスポンスが早すぎてネットワーク通信中のUIなどを確認できないという問題があったので、ローカルで通信中を再現するときに個人的にやっていることを書きます。

Chrome DevToolsを使う

Chrome DevToolsのNetworkタブで3G回線やオフラインの状態を再現できるのは有名だと思います。
ネットワークの設定をカスタムから自分で設定することができ、設定の中にLatencyという項目に1000を入力すれば1秒間の遅延を再現できます。

この画面から追加すると以下のように使えるようになります。

タイムアウトのテストなどもやりやすいです。

後で紹介する方法と比べて、ソースコードをいじる必要がないので個人的にはおすすめです。
ただ、全ての通信に時間がかかるようになります。

他のブラウザの開発ツールでもできそうですが試していないのでわかりません。すみません。

プログラム側で設定する

フロントエンドでもバックエンドでも、プログラムのどこかに遅延処理を入れることで再現できます。

例として、フロントエンドでsetTimeoutを使って再現する場合は以下のような感じです。

// API通信用のラッパー関数
const client = async (url, method = 'GET') => {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    return await fetch(url, {
        method: method,
    })
        .then((response) => response.json())
        .then((data) => data)
}

const fetchData = async (url) => {
    // ローディングのUIを表示する処理
    const data = await client(url)
    // ローディングのUIを非表示にする処理
    console.log(data)
}

fetchData(`${testUrl}`)

ソースコードに書き込むので間違ってそのまま本番環境にデプロイしないように注意が必要です。
トランスパイルができる環境であれば、環境変数を使って出しわけするのが良いです。

if (process.env.NODE_ENV === 'develop') {
 await new Promise((resolve) => setTimeout(resolve, 1000))
}

モックを使って開発する時などは本番のコードを意識しなくても良いので、このようにソースコード内に書いてしまうことも多いです。