时间戳

首页 > 解决方案 > 异步获取错误后隐藏模式不起作用

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

问题描述

我的页面中有一个进程需要使用async和从 API 获取数据fetch。在获取数据时，会显示加载模式，并$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>

更新

更正了模拟中的拼写错误（开发代码没有拼写错误）..我会尝试重新模拟。

标签： javascriptjquerytwitter-bootstrap

解决方案

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

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

使用正确的名称。

推荐阅读