如何检查获取的响应是不是是javascript中的json对象

Posted 2023-02-27

【中文标题】如何检查获取的响应是不是是javascript中的json对象

【英文标题】：How to check if the response of a fetch is a json object in javascript如何检查获取的响应是否是javascript中的json对象

【发布时间】：2016-09-04 09:57:23

【问题描述】：

我正在使用 fetch polyfill 从 URL 中检索 JSON 或文本，我想知道如何检查响应是 JSON 对象还是仅文本

fetch(URL, options).then(response => 
   // how to check if response has a body of type json?
   if (response.isJson()) return response.json();
);

【问题讨论】：

***.com/a/20392392/402037

【参考方案1】：

您可以查看响应的content-type，如this MDN example所示：

fetch(myRequest).then(response => 
  const contentType = response.headers.get("content-type");
  if (contentType && contentType.indexOf("application/json") !== -1) 
    return response.json().then(data => 
      // process your JSON data further
    );
   else 
    return response.text().then(text => 
      // this is text, do something with it
    );
  
);

如果您需要绝对确定内容是有效的 JSON（并且不信任标头），您始终可以将响应作为 text 接受并自己解析：

fetch(myRequest)
  .then(response => response.text())
  .then(text => 
    try 
        const data = JSON.parse(text);
        // Do your JSON handling here
     catch(err) 
       // It is text, do you text handling here
    
  );

异步/等待

如果您使用async/await，您可以以更线性的方式编写它：

async function myFetch(myRequest) 
  try 
    const reponse = await fetch(myRequest); // Fetch the resource
    const text = await response.text(); // Parse it as text
    const data = JSON.parse(text); // Try to parse it as json
    // Do your JSON handling here
   catch(err) 
    // This probably means your response is text, do you text handling here
  

【讨论】：

通过相同的策略，您可以将 response.json 与 catch 结合使用；如果你发现一个错误，这意味着它不是 json。这不是一种更惯用的处理方式（而不是放弃 response.json）吗？

@WouterRonteltap ：你不是只允许做一个或另一个。好像我记得你只能在 response.anything() 中获得一次机会。如果是这样，JSON 是文本，但文本不一定是 JSON。因此，您必须先做确定的事情，即 .text()。如果你先做 .json()，但它失败了，我认为你不会有机会也做 .text()。如果我错了，请给我看不同的。

在我看来，您不能信任标头（即使您应该信任，但有时您无法控制另一端的服务器）。因此，您在回答中还提到 try-catch 真是太好了。

是的，@Lonnie Best 在这方面是完全正确的。如果您调用 .json() 并引发异常（因为响应不是 json），如果您随后调用 .text()

，您将收到“正文已被消耗”异常

遇到随机格式错误的 Json 问题，这是解决方案 [清晰且简短]

【参考方案2】：

使用 JSON.parse 之类的 JSON 解析器：

function IsJsonString(str) 
    try 
        var obj = JSON.parse(str);

         // More strict checking     
         // if (obj && typeof obj === "object") 
         //    return true;
         // 

     catch (e) 
        return false;
    
    return true;

【参考方案3】：

您可以使用辅助函数干净地做到这一点：

const parseJson = async response => 
  const text = await response.text()
  try
    const json = JSON.parse(text)
    return json
   catch(err) 
    throw new Error("Did not receive JSON, instead received: " + text)
  

然后像这样使用它：

fetch(URL, options)
.then(parseJson)
.then(result => 
    console.log("My json: ", result)
)

这将引发错误，因此您可以根据需要catch。

【参考方案4】：

我最近发布了一个npmpackage，其中包括常用的实用功能。 我在那里实现的其中一个功能就像nis 的async/await 答案一样，您可以如下使用：

import fetchJsonRes, combineURLs from "onstage-js-utilities";

fetch(combineURLs(HOST, "users"))
    .then(fetchJsonRes)
    .then(json => 
        // json data
    )
    .catch(err => 
        // when the data is not json
    )

你可以在Github找到源代码