如何使用微调器在特定按钮上显示axios状态

<!-- HTML -->
<button id="myButton">点击发送请求</button>
<div id="statusIndicator"></div>

<script src="axios.min.js"></script>
<script src="statusIndicator.js"></script>

// JavaScript - statusIndicator.js
const button = document.getElementById('myButton');
const statusIndicator = document.getElementById('statusIndicator');

button.addEventListener('click', () => {
  // 显示加载状态
  statusIndicator.innerText = '加载中...';
  statusIndicator.classList.add('loading');

  // 发送axios请求
  axios.get('/api/data')
    .then(response => {
      // 请求成功
      statusIndicator.innerText = '请求成功';
      statusIndicator.classList.remove('loading');
      statusIndicator.classList.add('success');
      console.log(response.data);
    })
    .catch(error => {
      // 请求失败
      statusIndicator.innerText = '请求失败';
      statusIndicator.classList.remove('loading');
      statusIndicator.classList.add('error');
      console.error(error);
    });
});