类型设置为 JSON 时如何检查 AJAX 响应字符串

Question

我正在使用 ajax 从网页获取 JSON 数据。所以我将responseType 设置为json。如果网页处理数据成功，返回一个有效的JSON字符串，就可以了。

但是如果网页失败，它会返回一个带有错误信息的JSON字符串，（对不起，误解，）它返回一个错误字符串，而不是一个json字符串，所以JavaScript无法识别它是有效的 JSON 字符串。所以如果我检查response，它是空的。在这种情况下，我想查看响应字符串并检查错误消息是什么。

var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("POST", "/someEndpoint");
xhr.send();
xhr.onload = function() {
    console.log(xhr.response);
}

(Fiddle to reproduce the issue.)

如果 /someEndpoint 返回有效的 JSON，则 xhr.response 是一个 JavaScript 对象。但是，如果它不是有效的 JSON（当端点响应错误消息时），那么我会在 xhr.response 中得到一个空对象。我无法访问 invalid-JSON 错误响应，因为访问 xhr.responseText 会出现错误：

未捕获的 DOMException：无法从“XMLHttpRequest”读取“responseText”属性：该值仅在对象的“responseType”为“”或“文本”（为“json”）时才可访问

使用responseType="json" 运行请求后，我不知道如何读取原始HTTP 响应，因为无法访问responseText。

Answer 1

使用您的代码当前的方式将无法正常工作，因为错误消息直接表明：

未捕获的 InvalidStateError：无法读取“responseText”属性 来自“XMLHttpRequest”：该值仅在对象的 'responseType' 是 '' 或 'text'（原为 'json'）。

你可以通过以下证明看到：

var xhr = new XMLHttpRequest();
//xhr.responseType = "json";

xhr.open("POST", "/echo/json/");
xhr.send("hello world");

xhr.onload = function() {
    console.log(xhr.response);
    console.log(xhr.responseText);
}

当您将 responseType 设置为 JSON 时，您将不会在对象上获得 responseText 属性。您将不希望设置 responseType 并将响应 (parseJSON) 评估为文本字符串。如果您有响应的错误消息，那么您的 eval 将无法正确解析 JSON。这很像 jQuery 在幕后所做的，并且在这个主题上......

为什么要与使用本机 XMLHttpRequest 浏览器对象的不可能任务作斗争。 jQuery 花费数年时间在浏览器之间规范化AJAX 并标准化 API。该 API 有一个“始终”的回调，可以完美地满足您的需求。

TLDR 使用 jQuery 来解决这个问题。