[javascript] Fetch API와 XMLHttpRequest

Program / 글쓴이

Fetch API가 Promises를 사용 하고 둘 다 서버에 AJAX 요청을 수행 할 수 있음을 알고 있습니다.

Fetch API에는 XMLHttpRequest(및 Fetch API polyfill을 기반으로하므로) 사용할 수없는 몇 가지 추가 기능이 있음을 읽었습니다 XHR.

Fetch API에는 어떤 추가 기능이 있습니까?

답변

XHR이 아닌 페치로 수행 할 수있는 몇 가지 작업이 있습니다.

  • 요청 및 응답 오브젝트와 함께 캐시 API를 사용할 수 있습니다.
  • no-corsCORS를 구현하지 않는 서버에서 응답을 받아 요청 을 수행 할 수 있습니다 . JavaScript에서 직접 응답 본문에 액세스 할 수는 없지만 다른 API (예 : 캐시 API)와 함께 사용할 수 있습니다.
  • 스트리밍 응답 (XHR을 사용하면 전체 응답이 메모리에 버퍼링되며 가져 오기를 사용하면 하위 레벨 스트림에 액세스 할 수 있음). 아직 모든 브라우저에서 사용할 수는 없지만 곧 제공 될 예정입니다.

XHR로 할 수있는 일이 몇 가지 있지만 아직 가져 오기로는 할 수 없지만 조만간 사용할 수있게됩니다 ( “미래의 개선 사항”단락을 읽으십시오 : https : //hacks.mozilla .org / 2015 / 03 / this-api-is-so-fetching / ) :

  • 요청을 중단합니다 (@sideshowbarker가 그의 설명에서 설명하는 것처럼 Firefox 및 Edge에서 작동 함).
  • 진행 상황을보고하십시오.

이 기사 https://jakearchibald.com/2015/thats-so-fetch/ 에는 자세한 설명이 포함되어 있습니다.

답변

술책

  • 문서를 소비하는 기본 제공 방법이 없습니다.
  • 아직 시간 초과를 설정할 방법이 없습니다
  • 콘텐츠 유형 응답 헤더를 재정의 할 수 없습니다
  • 콘텐츠 길이 응답 헤더가 있지만 노출되지 않은 경우 스트리밍하는 동안 본문의 전체 길이를 알 수 없습니다.
  • 요청이 완료된 경우 에도 신호의 중단 처리기를 호출합니다.
  • 업로드 진행률 없음 ( ReadableStream요청 기관이 아직없는 인스턴스 지원 )

XHR

  • 쿠키를 보내지 않는 방법은 없습니다 ( 비표준 mozAnon플래그 또는 AnonXMLHttpRequest생성자 를 사용하는 것 제외 )
  • FormData인스턴스를 반환 할 수 없습니다
  • fetch의 no-cors모드 와 동일하지 않습니다
  • 항상 리디렉션을 따르십시오

답변

위의 답변은 훌륭하고 통찰력을 제공하지만이 Google 개발자 블로그 항목 에서 공유 한 것과 동일한 의견을 공유 합니다 (실제적인 관점에서) 주요 차이점은에서 제공 된 기본 약속의 편리함입니다.fetch

이와 같은 코드를 작성하는 대신

function reqListener() {
    var data = JSON.parse(this.responseText);
}

function reqError(err) { ... }

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

약속과 현대적인 문법으로 정리하고 좀 더 간결하고 읽기 쉬운 것을 쓸 수 있습니다

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => {
            ...
        });
    })
    .catch((err) => { ... });

답변