javascript url 调用执行两次

Question

我试图在 javascript 警告框中显示此 json 数据，但它显示了两次（相同的内容）。它正在工作，但我不知道为什么它会显示两个警报。（javascript 不是我的首选语言）。

这是来自 URL 的回复：

{
  "type": "error",
  "response": {
    "message": "Could not start app"
  }
}

这是我使用的代码：

<script type="text/javascript">
       
        function call() {
            const Http = new XMLHttpRequest();
            const url='https://url_to_get_the_response';
            Http.open("GET", url);
            Http.send();
            Http.onreadystatechange = (e) => {
                if (Http.responseText) {
                alert(Http.responseText);
               }
           }
    }
    </script>

我收到两个警报，都包含相同的内容（.json 结果）。我只想要其中之一。

我尝试在 if (Http.responseText) 部分添加 return; 和 break call;。在 if 语句中添加 return; 没有任何作用，添加 break call; 使其停止工作。

对此有何建议？谢谢。

Answer 1

你的做法是正确的。 onreadystatechange 事件被多次触发，因为 readyState 属性从 API 调用的开始到结束发生变化。

为 XMLHttpRequest 对象中的适当 readyState 和 status 值添加 if 条件。解决了这个问题。

您可以在此处阅读有关这些属性的更多信息readyState, status

function call() {
        const Http = new XMLHttpRequest();
        const url='https://jsonplaceholder.typicode.com/todos/1';
        Http.open("GET", url);
        Http.send();
        Http.onreadystatechange = (e) => {
            if (Http.readyState == 4 && Http.status == 200 && Http.responseText) {
            alert(Http.responseText);
           }
       }
  }

<button onclick='call()'>Call</button>

javascript url 调用执行两次

javascript url call executing twice

javascript

xmlhttprequest