Question

我的页面中有一个流程，需要使用async和fetch从API提取数据。在获取数据时，将显示加载模式并在获取数据后删除（使用$id.modal.('hide)）。

正确提取数据后，将删除模式，不会出现任何问题。但是，如果在获取数据时发生任何类型的错误（例如404），则模式不会隐藏。

这是一个模拟JSFiddle上的问题的链接

$(document).ready(function() {

  $('#btn-modal').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder.typicode.com/todos/1");
  });
  $('#btn-modal2').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder404.typicode.com/todos/1");
  });

});

async function getData(url) {
  try {

    const response = await fetch(url);
    if (response.status != 200) {
      throw new Error(response);
    }
    const data = await response.json();
    closeDialog();
		alert("got data");

  } catch (error) {
    closeDialog();
		alert("error");
  }
}

function closeDialog() {
  $('#myModal').modal('hide');
};

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-header">
    <h3 id="myModalLabel">TEST.</h3>
  </div>
  <div class="modal-body">
    <p>test</p>
  </div>
</div>
<br />
<button id="btn-modal" class="btn">VALID</button>
<button id="btn-modal2" class="btn">INVALID</button>

更新

更正了模拟中的错别字错误（没有错字dev代码）..我将尝试重新模拟。

Answer 1

这只是一个错字。呼叫closeDialog();而不是closeDialogue();，它将起作用。

Answer 2

closeDialog()中有错字

$(document).ready(function() {

  $('#btn-modal').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder.typicode.com/todos/1");
  });
  $('#btn-modal2').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder404.typicode.com/todos/1");
  });

});

async function getData(url) {
  try {

    const response = await fetch(url);
    if (response.status != 200) {
      throw new Error(response);
    }
    const data = await response.json();
    closeDialog();
		alert("got data");

  } catch (error) {
    closeDialog();
		alert("error");
  }
}

function closeDialog() {
  $('#myModal').modal('hide');
};

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-header">
    <h3 id="myModalLabel">TEST.</h3>
  </div>
  <div class="modal-body">
    <p>test</p>
  </div>
</div>
<br />
<button id="btn-modal" class="btn">VALID</button>
<button id="btn-modal2" class="btn">INVALID</button>

Answer 3

如果您检查浏览器控制台，则错误

Uncaught (in promise) ReferenceError: closeDialogue is not defined
    at getData ((index):58)

使用正确的名称。

异步获取错误后隐藏模式不起作用

3 个答案: