POST请求后页面刷新

Question

我的JavaScript代码用来录制一段声音，然后通过一个fetch的POST请求把它发送到本地的Flask服务器进行处理。不过，每次发送声音片段时，页面都会刷新一次，处理完成后又刷新一次。我并不喜欢这样，因为这让调试变得更加困难。

这是用来录制音频的函数：

recordButton.onmousedown = e => {
  
  console.log('Recording...');
  audioChunks = [];
  navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
          rec = new MediaRecorder(stream);
          rec.ondataavailable = e => {
              audioChunks.push(e.data);
              if (rec.state == "inactive") {
                  let blob = new Blob(audioChunks, { type: 'audio/mpeg-3' });
                  recordedAudio.src = URL.createObjectURL(blob);
                  inputAudio = recordedAudio.src
                  recordedAudio.controls = true;
                  sendData(blob);
              }
          }
          rec.start();
      });
};

这是用来发送音频的函数：

async function sendData(data) {

    const formData = new FormData();
    
    formData.append('audio', data);
    console.log("audio appended")
    fetch('http://127.0.0.1:5000/upload-audio', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    console.log("audio downloaded")
    .then(data => {
        console.log(data.response);
        // Download audio response file
        
        console.log("audio downloaded")
    })
    .catch(error => {
        console.error('Error:', error);
    });
    
}

你能帮我找出问题出在哪里吗？

我尝试过使用e.preventDefault之类的方法，但都没有成功。