无法同时调用API和重定向

Question

我正在尝试使用XMLHttpRequest调用API，然后在成功状态下尝试将其重定向到下一页但是重定向正在运行且调用无法正常工作，如果我删除了重定向，则调用有效..

我不确定在调用API时是否无法重定向，或者我做错了所以请检查并提出建议

这是我在AJAX调用成功时编写的代码。

if (response.status === true) {
  var api = "https://api-voice.solutionsinfini.com/v1/?api_key=****&method=dial.click2call&output=xml&caller=****&receiver=" + sessionStorage.fullNumber;

  // Calling the API
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", api);
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById('myModalCallback').style.display = 'none';
      window.location.href = "/anotherpage";
    }
  };
  xhttp.send();
  document.getElementById('myModalCallback').style.display = 'none';
}

Answer 1

此行是异步的，因为DOM更改已排队，因此浏览器可以一起更新它们：

document.getElementById('myModalCallback').style.display = 'none';

重定向发生在浏览器更新DOM之前。要解决此问题，您需要在事件循环结束时放置重定向。一种方法是使用setTimeout。

查看此答案以获取有关DOM更新队列的更多说明：Update the DOM vs Rerender the View In Angular

事件循环：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Answer 2

你可能要等你的代码getElementById（'myModalCallback'）在重定向之前会消失吗？它可能就像它在重定向之前不会消失。如果您需要在重定向之前查看“display：none”效果，则必须在某些超时时间内重定向。

这样的事情：

if (xhttp.readyState == 4 && xhttp.status == 200) {
  document.getElementById('myModalCallback').style.display = 'none';
  window.setTimeout(function(){
   window.location.href = "/anotherpage";
  }, 1000);
}

Answer 3

我怀疑，代码是相当不错的，但你没有得到200回复​​。您可以通过两种方式进行调试：

1. 使用以下代码检查api服务器的响应代码（请注意我更改了API端点，此代码完美运行）

var api = "//freegeoip.net/json/?callback=?";

// Calling the API
var xhttp = new XMLHttpRequest();
xhttp.open("GET", api);
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200)
    {
      console.log('yass, 200 response');
      document.getElementById('myModalCallback').style.display = 'none';
      window.location.href = "/otherpage";
    } else if (xhttp.readyState == 4)
    {
      // got a bad response
      console.log('ouch, '+xhttp.status+' response');
    } else {
      console.log('ready state change',xhttp.readyState);
    }
};
xhttp.send();
document.getElementById('myModalCallback').style.display = 'none';

1. 在浏览器的网络标签中查看您从API获得的响应

我真的建议使用类似jQuery的ajax调用（适用于各种浏览器），而不是直接使用XMLHttpRequest对象：http://api.jquery.com/jquery.ajax/

Answer 4

您是否尝试在console.log('xhttp', xhttp)功能的第一行添加onreadystatechange以检查您的回复情况？

Answer 5

您是否尝试过使用XMLHttpRequest的新语法？

function onResponse () {
  console.log(this.responseText);
  window.location.href = 'http://www.google.com';
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", onResponse);
oReq.open("GET", "https://httpbin.org/get");
oReq.send();