如何在等待响应时显示加载器，如果没有数据，会显示一条消息“没有数据可用”？

<div id="loader" class="loader"></div>
<div id="message" class="message"></div>

.loader {
  /* 样式和动画效果自行定义 */
}

.message {
  display: none;
  /* 样式自行定义 */
}

// 获取加载器和消息元素
const loader = document.getElementById('loader');
const message = document.getElementById('message');

// 显示加载器
loader.style.display = 'block';

// 发起异步请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 隐藏加载器
    loader.style.display = 'none';

    // 检查数据是否为空
    if (data.length === 0) {
      message.style.display = 'block';
      message.textContent = '没有数据可用';
    } else {
      // 处理数据并更新界面
      // ...
    }
  })
  .catch(error => {
    // 隐藏加载器
    loader.style.display = 'none';

    // 显示错误消息
    message.style.display = 'block';
    message.textContent = '请求发生错误';
  });