Javascript 如何解释返回 500？答案

【问题标题】：How can Javascript account for returning a 500?Javascript 如何解释返回 500？
【发布时间】：2020-11-21 12:52:41
【问题描述】：

我正在使用登录表单来构造和发送一个 URL（即下面脚本中写入存储的“完整 url”），该 URL 应该返回一个 JSON 对象。

如果登录正确，后端会向我发送一个带有验证密钥的 JSON 对象，以验证它是否成功返回。（像这样：[{"result":"VALID"}]）

如果登录不正确，只会提供500错误。

不幸的是，当它收到 500 错误时，并没有因为结果无效而启动它们，而是因为没有要验证的对象而放弃了脚本。

如何从前端检测到收到 500 错误然后触发“bootThem()”？

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null); 
}

window.onload = function () {
    // get the url from storage.
    var fullURL = localStorage.getItem("fullURLStored")

    // if the URL is empty, boot them back to the login page.
    if(fullURL == " "){
        bootThem(); 
       }
       
    // send the URL to the server.
    readTextFile(fullURL, function (text) {
        
        var data = JSON.parse(text);

        if(data[0].result !== "VALID"){
            bootThem(); 
        } else{
            //do stuff
        }
    }); 
}

【问题讨论】：

if (rawFile.readyState === 4 && rawFile.status == "200") {

标签： javascript json error-handling http-status-code-500

【解决方案1】：

请看下面的小提琴我已经模拟了一个来自 Mock API 的 500 响应并手动链接它：

  if (rawFile.readyState === 4 && ((rawFile.status === 200) || (rawFile.status === 500))) {
      console.log("fired");
      callback(rawFile.responseText);
    }

https://jsfiddle.net/asutosh/vdegkyx2/8/

【讨论】：

我想我需要一种方法来区分 500 和 200。目前，如果有 500 或 200，它们都会 .log(''fired") 到控制台。我需要一些东西比如：if 500{"//boot them"}, if 200{proceed}。我试图在你的 jsfiddel 中将它设置为 if 语句，但似乎无法让它工作：使用 google.com 作为我知道应该成功返回的网站，它只是在日志中给我“错误代码”，而不是 200。
这是我尝试过的：` //应该给 200！ rawFile.open("GET", "google.com", true);//应该给200。//应该给500！ //rawFile.open("GET", "run.mocky.io/v3/977125b1-59ec-4bb2-b9e1-9c905160c105", true); rawFile.onreadystatechange = function() { if (rawFile.readyState === 4 && (rawFile.status === 200)) { console.log("200");回调（rawFile.responseText）； } if (rawFile.readyState === 4 && (rawFile.status === 500)) { console.log("500");回调（rawFile.responseText）； }`
供您参考，下面是小提琴，我有两个单独的 URL 只是为了模拟成功和失败的场景。通过代码中的 cmets 在成功（200）和失败（500）之间切换jsfiddle.net/asutosh/je5gy0hr/8
感谢@Austosh！我能够用它来帮助找出我需要什么！
@StephenHoydis 请标记任何合适的答案。

【解决方案2】：

好的，感谢 Asutosh 朝着正确的方向推动，如果 JSON 调用返回 500 错误，我能够调整我的函数来引导用户，如果没有，则允许用户通过。

这正是我处理从 JSON 返回的 500 错误所需要的：

function bootThem() {
   //execute code to reset session and return user to login page.
}

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.addEventListener('error', () => {
    console.log("error code");
  });

  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() { 
    if (rawFile.readyState === 4 && (rawFile.status === 500)) {
        console.log("500");
        bootThem(); 
        callback(rawFile.responseText);
    } 
    if (rawFile.readyState === 4 && (rawFile.status === 200)) {
        console.log("200");
        callback(rawFile.responseText);
    }

  }
  rawFile.send(null);
}


window.onload = function () {
    // get the url from storage.
    var fullURL = localStorage.getItem("fullURLStored")

    // if the URL is empty, boot them back to the login page.
    if(fullURL == " "){
        bootThem(); 
       }
       
    // send the URL to the server.
    readTextFile(fullURL, function (text) {
        
        var data = JSON.parse(text);

        if(data[0].result !== "VALID"){
            bootThem(); 
        } else{
            //do stuff
        }
    }); 
}

【讨论】：