가져오기 API vs XMLHttpRequest

가져오기 API vs XMLHttpRequest

Fetch API에서 사용하는 것은Promise둘 다 서버에 대한 AJAX 요구를 실행할 수 있습니다.

Fetch API에는 몇 가지 추가 기능이 있다고 읽었는데, 이 기능은 에서 사용할 수 없습니다.XMLHttpRequest(Fetch API polyfill에서는 다음 정보를 기반으로 하기 때문에XHR).

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

XHR이 아닌 fetch를 사용하여 수행할 수 있는 몇 가지 작업이 있습니다.

• 요청 및 응답 개체와 함께 Cache API를 사용할 수 있습니다.
• 할 수 있다no-cors요청, CORS를 구현하지 않은 서버로부터 응답을 받습니다.JavaScript에서 응답 본문에 직접 액세스할 수는 없지만 다른 API(캐시 API 등)와 함께 사용할 수 있습니다.
• 스트리밍 응답(XHR을 사용하면 전체 응답이 메모리에 버퍼링되며, fetch를 사용하면 로우 레벨 스트림에 액세스할 수 있습니다).일부 브라우저에서는 아직 사용할 수 없지만 곧 사용할 수 있습니다.

XHR에서는 아직 취득할 수 없지만 조만간 이용할 수 있게 될 것입니다(https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/)의 "향후 개선 사항" 단락을 참조하십시오).

• 요청을 중단합니다(@sideshowbarker가 코멘트에서 설명한 바와 같이 Firefox 및 Edge에서 작동합니다).
• 진척 상황을 보고하다.

이 문서 https://jakearchibald.com/2015/thats-so-fetch/ 에 자세한 설명이 기재되어 있습니다.

가지고 오다

• 문서를 사용하기 위한 기본 제공 메서드 누락
• 아직 시간 초과를 설정할 방법이 없습니다.
• content-type 응답 헤더를 덮어쓸 수 없습니다.
• 콘텐츠 길이 응답 헤더가 있지만 노출되지 않은 경우 스트리밍 중에 본문의 총 길이를 알 수 없습니다.
• 요청이 완료된 경우에도 신호의 중단 핸들러를 호출합니다.
• 업로드 진행 없음(지원)ReadableStream요청 기관이 아직 도착하지 않은 경우
• 지원하지 않음(나트륨)

XHR

• 쿠키를 보내지 않을 방법은 없습니다(비표준 플래그 또는 비표준 플래그를 사용하는 것 제외).AnonXMLHttpRequest컨스트럭터)
• 돌아갈 수 없다FormData인스턴스
• 와 동등하지 않다fetch의no-cors모드
• 항상 리다이렉트를 따릅니다.

위의 답변은 훌륭하고 좋은 통찰력을 제공하지만, 이 구글 개발자 블로그 엔트리에서 공유된 것과 같은 의견을 공유합니다. 가장 큰 차이점은 (실용적인 관점에서) 기본 제공 약속의 편리함입니다.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) => { ... });

언급URL : https://stackoverflow.com/questions/35549547/fetch-api-vs-xmlhttprequest