JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<div style="display:flex; flex-direction:column">
  <span id="a">wait</span>
  <span id="b">wait</span>
  <button id="runner">実行</button>
</div>

JavaScript

/** JavaScript でマイクロ秒待機する */
function sleep(time) {
  return new Promise(function(resolve, reject) {
    window.setTimeout(resolve, time);
  });
}

/**
 * axios の通信前処理として実行する関数を生成する関数。
 * ランダムな秒数待つ。
 * @param {Number} msMax 待ち時間最大値ミリ秒
 * @param {Number} msMin 待ち時間最小値ミリ秒
 */
function makeDelayAxios(msMax, msMin = 0) {
  return async (config) => {
    await sleep(Math.random() * (msMax - msMin) + msMin);
    return config;
  };
}


// axios を生成して interceptors.request に追加
const aAxios = axios.create();
aAxios.interceptors.request.use(makeDelayAxios(2000));
const bAxios = axios.create();
bAxios.interceptors.request.use(makeDelayAxios(2000));

// デモ用通信処理
document.getElementById('runner').addEventListener('click',()=>{
  const aMsgEl = document.getElementById('a');
  const bMsgEl = document.getElementById('b');
  aMsgEl.innerText ='running';
  bMsgEl.innerText ='running';
  // 通信を実行
  aAxios.get('/').finally(() => aMsgEl.innerText ='finish a');
  bAxios.get('/').finally(() => bMsgEl.innerText ='finish b');

  // finish b -> finish a と表示される時と
  // finish a -> finish b と表示される時の二種類が起こりうるようになる
  
});