가져 오기 응답이 자바 스크립트의 json 객체인지 확인하는 방법


94

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

답변:


162

이 MDN 예제에content-type 표시된대로 응답을 확인할 수 있습니다 .

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

1
동일한 전략을 통해 response.json을 catch와 함께 사용할 수 있습니다. 오류가 발생하면 json이 아님을 의미합니다. (response.json을 버리는 대신) 이것을 처리하는 더 관용적 인 방법이 아닐까요?
Wouter Ronteltap 2018

3
@WouterRonteltap : 당신은 둘 중 하나만 할 수있는 것이 아닙니다. response.anything ()에서 한 번만 얻은 것을 기억하는 것 같습니다. 그렇다면 JSON은 텍스트이지만 텍스트가 반드시 JSON 일 필요는 없습니다. 따라서 먼저 .text ()라는 확실한 작업을 수행해야합니다. .json ()을 먼저했는데 실패하면 .text ()도 할 기회를 얻지 못할 것 같습니다. 내가 틀렸다면 다르게 보여주세요.
Lonnie Best

2
제 생각에는 헤더를 신뢰할 수 없습니다 (그래야하지만 때로는 상대방의 서버를 제어 할 수없는 경우도 있음). 따라서 답변에서 try-catch를 언급하는 것이 좋습니다.
Jacob

2
예, @Lonnie Best가 완전히 정확합니다. .json ()을 호출하고 예외가 발생하는 경우 (응답이 json이 아니기 때문에) 이후에 .text ()를 호출하면 "Body가 이미 사용되었습니다"예외가 발생합니다
Andy

2

도우미 함수를 사용하여 깔끔하게 수행 할 수 있습니다.

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원하는 경우 할 수 있도록 오류가 발생 합니다.


1

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;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.