javascript ファイルのダウンロードとボタン連打防止(2)

(fetchFile_bs5.html)

<html>
<title></title>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script>
function fetchFile(e){

  if( this.method === 'GET' ){
    options = { method: this.method, cache: 'no-store' };
  }else if( this.method === 'POST' ){
    let form = document.getElementById(this.formid);
    let formData = new FormData(form);
    options = { method: this.method, body: formData };
  }else{
    console.log("ELSE");
  }

  fetch(this.url, options)
  .then((response) => {
    console.log("response");
    document.getElementById('exampleModalBody').innerHTML = 'ダウンロード中';
    if(!response.ok){
      return response.text().then(text => {throw new Error(text)})
    }
    return response.blob();
  })
  .then((blob) => {
    console.log('blob');
    setTimeout(()=>{
      let anchor = document.createElement('a');
      document.body.appendChild(anchor);
      anchor.href = window.URL.createObjectURL(blob);
      anchor.download = this.formid + '.jpg'
      anchor.click();
      document.body.removeChild(anchor);
    },1000);
  })
  .catch(function(err){
    console.log('catch:' + err);
    document.getElementById('exampleModalBody').innerHTML = err;
  })
  .finally(function(){
    console.log('finally');
    let myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('exampleModal'));
    setTimeout(() => {
      myModal.hide();
    },1000);
  });

}
</script>

<div class="container px-5 py-3">
<form id="form_get">
  <button type="button" value="get" name="get" id="button_get" data-bs-toggle="modal" data-bs-target="#exampleModal">get</button>
</form>
</div>

<div class="container px-5 py-3">
<form id="form_post">
  <input type="text" name="a">
  <input type="text" name="b">
  <button type="button" value="post" name="post" id="button_post" data-bs-toggle="modal" data-bs-target="#exampleModal">post</button>
</form>

<!-- Modal -->
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body" id="exampleModalBody">
        ダウンロード中
      </div>
    </div>
  </div>
</div>

<script>
let button_get = document.getElementById('button_get');
button_get.addEventListener('click', {method:'GET', url:'http://localhost:4567/get', formid: 'form_get', handleEvent: fetchFile});
let button_post = document.getElementById('button_post');
button_post.addEventListener('click', {method:'POST', url:'http://localhost:4567/post', formid: 'form_post', handleEvent: fetchFile});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>
</html>