Fetch의 .json() 메서드가 때때로 Promise를 반환하고 때로는 값을 반환하는 이유는 무엇입니까?

Fetch의 .json() 메서드에서 Promise 동작 탐색

Fetch API를 탐색하는 동안 .json() 메서드에서 흥미로운 문제가 발생합니다. 특정 상황에서는 Promise를 반환하고 다른 상황에서는 직접적인 값을 반환하는 이유를 살펴보겠습니다.

다음 스니펫을 고려하세요.

fetch(url)
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));

여기서 post.data는 Promise 개체를 생성하여 다음을 제안합니다. 첫 번째 .then() 핸들러 내의 .json() 호출은 promise를 반환합니다.

그러나 코드를 수정하면 간단히 .json()을 연결하면

fetch(url)
  .then(response => response.json())
  .then(post => document.write(post.title));

post가 이제 객체가 되어 title 속성에 직접 액세스할 수 있습니다.

이 수수께끼를 풀려면 약속의 본질을 이해해야 합니다. .json()은 HTTP 응답 본문을 JSON으로 가져오는 비동기 작업을 시작하여 약속을 반환합니다. 이 Promise는 JSON으로 구문 분석된 데이터의 최종 가용성을 나타냅니다.

Promise가 .then() 핸들러에서 반환되면(첫 번째 예에서와 같이) Promise는 체인 내에 계속 존재합니다. 그러나 값이 반환되면(두 번째 예에서처럼) Promise는 "이행"된 것으로 간주되고 반환된 값은 외부 .then()의 결과로 채택됩니다.

이러한 상황을 처리하려면, 중첩된 .then()s를 사용하여 Promise를 연결할 수 있습니다.

fetch(url).then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })
).then(res => {
    console.log(res.status, res.data.title)
}));

또는 async 및 async와 같은 최신 비동기 키워드를 활용할 수 있습니다. wait:

const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);

JSON 구문 분석을 시도하기 전에 항상 HTTP 응답 상태를 확인하는 것을 기억하세요. JSON이 항상 예상된 형식이 아닐 수도 있기 때문입니다.

위 내용은 Fetch의 .json() 메서드가 때때로 Promise를 반환하고 때로는 값을 반환하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!