Bootstrap modal.show()触发异常：点击即弹出而非异步完成后显示

问题根源 #

按钮上的data-bs-toggle="modal"和data-bs-target="#exampleModal"是Bootstrap内置的模态框触发属性，点击按钮时Bootstrap会直接触发模态框显示，和你写的Send()异步API请求逻辑完全独立，所以不管API请求是否完成、是否成功，模态框都会立刻弹出。

修复步骤 #

1. 移除按钮上的自动触发属性
   删除按钮标签里的data-bs-toggle="modal"和data-bs-target="#exampleModal"，让模态框的显示完全由你的JS逻辑控制。

   调整后的按钮代码：

   <button
     class="btn btn-primary w-100"
     onclick="Send();"
   >
     Invia
   </button>
   

2. 确保正确初始化Bootstrap模态框实例
   在Send()函数内或全局作用域中，正确获取模态框的Bootstrap实例，避免modal.show()报错：

   // 可放在Send函数开头，或全局初始化
   const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
   

3. 修正API地址的语法错误
   你的file_string变量存在引号未闭合的问题，会导致JS报错，需要修正：

   var file_string = "https://<xxxx>.it/api/"; // 补上闭合的双引号
   

完整修正后的Send函数示例 #

function Send() {
  // 初始化模态框实例
  const modal = new bootstrap.Modal(document.getElementById('exampleModal'));

  var select_file = document.getElementById("formFile").files[0];
  var select_project_name = document.getElementById("selec-div").value;
  var pacchetto_id = document.getElementById("pacchetto").value;
  var versione_id = document.getElementById("versione").value;
  // 修正引号闭合问题
  var file_string = "https://<xxxx>.it/api/";
  console.log(file_string);

  var formData = new FormData();
  formData.append("file", select_file);

  fetch(file_string, {
    method: "PUT",
    headers: {
      "PRIVATE-TOKEN": TOKEN,
    },
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => {
      console.log("File uploaded successfully:", data);
      if (data["message"] == "201 Created") {
        modal.show(); // 满足条件时才显示模态框
      }
    })
    .catch((error) => {
      console.error("Error uploading file:", error);
    });
}

内容的提问来源于stack exchange，提问作者NicoCaldo