javascript에서 가져오기 응답이 json 객체인지 확인하는 방법

javascript에서 가져오기 응답이 json 객체인지 확인하는 방법

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();
});

확인하실 수 있습니다.content-type이 MDN의 예에 나타나 있듯이, 응답의 경우는 다음과 같습니다.

fetch(myRequest).then(response => {
  const contentType = response.headers.get("content-type");
  if (contentType && contentType.indexOf("application/json") !== -1) {
    return response.json().then(data => {
      // The response was a JSON object
      // Process your data as a JavaScript object
    });
  } else {
    return response.text().then(text => {
      // The response wasn't a JSON object
      // Process your text as a String
    });
  }
});

컨텐츠가 유효한 JSON(및 헤더를 신뢰하지 않음)임을 확실히 할 필요가 있는 경우는, 항상 다음과 같이 응답을 받아 들일 수 있습니다.text직접 해석할 수 있습니다.

fetch(myRequest)
  .then(response => response.text()) // Parse the response as text
  .then(text => {
    try {
      const data = JSON.parse(text); // Try to parse the response as JSON
      // The response was a JSON object
      // Do your JSON handling here
    } catch(err) {
      // The response wasn't a JSON object
      // Do your text handling here
    }
  });

비동기/대기

사용하시는 경우async/await, 보다 선명한 방법으로 쓸 수 있습니다.

async function myFetch(myRequest) {
  try {
    const reponse = await fetch(myRequest);
    const text = await response.text(); // Parse it as text
    const data = JSON.parse(text); // Try to parse it as JSON
    // The response was a JSON object
    // Do your JSON handling here
  } catch(err) {
    // The response wasn't a JSON object
    // Do your text handling here
  }
}

도우미 기능을 사용하여 이를 깔끔하게 수행할 수 있습니다.

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원하시면 하세요.

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;
}

저는 최근에npm 일반적인 유틸리티 기능을 포함하는 패키지입니다.제가 거기서 구현한 기능 중 하나는 국정원 것과 똑같습니다.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에서 소스를 찾을 수 있습니다.

Fetch약속을 반환합니다.프로미스 체인이 있으면 이런 라이너 하나면 될 것 같아요.

const res = await fetch(url, opts).then(r => r.clone().json().catch(() => r.text()));

언급URL : https://stackoverflow.com/questions/37121301/how-to-check-if-the-response-of-a-fetch-is-a-json-object-in-javascript