✅가져오기와 XMLHTTPRequest의 차이점은 무엇인가요?-JS 튜토리얼-php.cn

안녕하세요 여러분! 흥미로운 프로젝트를 진행하면서 fetch와 XMLHTTPRequest의 차이점에 대해 설명하고 싶은 아이디어가 생겼습니다. 사실, 그 질문이 약간 부정확하다는 점에서 창조의 역사를 알고 있다면 그 질문은 꽤 흥미로울 것입니다. 그러나 여전히 그것에 대해 알아야합니다. 예를 들어 개발자로서 제가 거래 할 때 매일매일 온갖 API로 불필요한 코드를 만들지 않도록 알아두면 유용합니다.

XMLHTTPRequest란 무엇이며 그 생성에 대한 간략한 역사

자바스크립트에서는 XMLHttpRequest 객체를 사용하여 서버와 상호작용합니다. 전체 페이지를 새로 고치지 않고도 URL에서 데이터를 검색할 수 있습니다. 이를 통해 웹 페이지는 사용자가 수행하는 작업을 방해하지 않고 페이지의 일부만 업데이트할 수 있습니다. 그러나 일반적으로 말하면, 직설적으로 말하면 API입니다. 그리고 이 말을 들으면 우리는 즉시 이벤트 루프, 비동기(특정 시간 후에 코드 실행이 완료되는 경우) 등의 개념을 기억합니다. 예를 들어 XMLHTTPRequest를 사용하는 코드는 다음과 같습니다.

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

로그인 후 복사

XMLHTTPRequest 생성의 역사는 우리를 공룡이 걸었던 먼 해로 데려갑니다... 좋아요, 농담입니다. 실제로 이 API는 Microsoft에서 처음 개발되었으며 Microsoft Exchange Server 소프트웨어 2000 제품의 웹용 Outlook 구성 요소에 도입되었습니다.

✅What is the difference between fetch and XMLHTTPRequest?

그 당시에는 IXMLHTTPRequest라는 이름으로 다르게 불렸는데, 인터페이스의 첫 번째 버전에서는 지금과는 조금 달랐습니다. 즉, 베이스는 분명히 남아있지만 25년에 걸쳐 조정이 이루어진 것은 분명하다. 이후 MSXML 2.0에 추가되었고, 1999년 3월에는 Internet Explorer 5에도 추가되었습니다.

그런 다음 Mozilla 프로그래머는 IXMLHTTPRequest를 기반으로 자체 API 버전을 개발한 다음 nsIXMLHttpRequest를 호출하고 우리가 사랑하는 XMLHttpRequest를 통해 액세스할 수 있게 만들었습니다. 이 모든 것은 2000년 12월 Gecko 버전 0.6에 추가되었습니다(Gecko는 FireFox 및 기타 여러 곳에서 사용되는 브라우저 엔진입니다). 그 당시에는 FireFox 같은 것이 없었습니다. 첫 번째 버전이 2002년 9월에 출시되어 Phoenix, 그 다음에는 FireBird, 2004년 FireFox까지만 불렸기 때문입니다. 그리고이 모든 것 이전에 Netscape Navigator가 있었지만 Internet Explorer와의 대결은 그게 전부입니다. 그것은이 기사에 쓸 의미가없는 또 다른 이야기입니다. 나중에 Safari, Opera 및 기타 브라우저에 지원이 추가되었습니다. 그래서 사람들이 이 객체가 오래된 브라우저와의 호환성을 위해 사용된다고 말한다면 물론 그 말이 맞습니다. 왜냐하면 웹 개발이 막 발전하던 90년대 후반으로 우리를 데려가기 때문입니다. 닷컴 버블 당시도 기억하실 수 있지만, 사실은 조금 더 빨랐거나 그 당시(Internet Explorer를 사용한다면) 어쨌든 그때였습니다.

그렇다면 차이점은 무엇입니까?

차이점에 대한 질문으로 돌아가서 가장 중요한 차이점은 이미 기록에 숨겨져 있습니다. 왜냐하면 XMLHTTPRequest는 오래되었지만 지원되는 API이고 fetch는 이를 대체하는 새로운 API일 뿐이기 때문입니다. 현재 XMLHTTPRequest 2.0은 2012년 1월에 출시되었지만 1.0 표준의 최신 버전은 같은 해 12월에 출시되었습니다. 이것이 이 객체의 현재 표준입니다. 하지만 이제 이 글을 항상 작성했던 개발자들의 얼굴을 상상해보세요:

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

로그인 후 복사

이것 대신

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getData', true);

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

xhr.onerror = function () {
    console.error('There was a network error.');
};

xhr.send();

로그인 후 복사

몇 년 전. 바로 그 생각이 떠오르네요.

✅What is the difference between fetch and XMLHTTPRequest?

그러나 차이점은 다음과 같습니다.

Promise 지향: Fetch API는 Promise를 사용하므로 비동기 코드 작업이 더 쉬워지고 .then(), async 및 Wait와 같은 편리한 구성을 사용할 수 있습니다.
단순화된 인터페이스: Fetch API는 더 간단하고 직관적인 구문을 가지고 있습니다. 예를 들어 요청을 하기 위해 XHR의 경우처럼 객체를 생성하고 해당 속성을 설정할 필요가 없습니다.
새로운 기능 지원: Fetch API는 요청, 응답 및 변환 작업을 위한 편리한 방법을 제공하는 요청 및 응답 객체와 같은 새로운 기능을 지원합니다.
스트림 지원: Fetch API는 스트리밍 데이터를 지원하므로 수신되는 대량의 데이터로 작업할 수 있습니다.
요청 취소: Fetch API에는 요청 취소 기능이 내장되어 있지 않지만 중단 컨트롤러를 사용하면 요청을 더 유연하게 관리할 수 있습니다.
향상된 맞춤설정: Fetch API는 헤더 설정, 캐싱 모드, 기타 매개변수 등 요청 구성을 위한 더 많은 옵션을 제공합니다.
cors 지원: Fetch API는 CORS(Cross-Origin Resource Sharing) 작업 시 더 많은 유연성을 제공하므로 다른 도메인의 리소스에 대한 요청을 더 유연하게 구성할 수 있습니다.
더 나은 오류 처리: Fetch API로 작업할 때 요청 오류(예: 네트워크 사용 불가)가 약속을 거부하는 반면, 4xx 또는 5xx 코드를 사용한 성공적인 응답은 약속을 거부하므로 응답 상태를 더 잘 처리할 수 있습니다. 거부하시면 상태 코드를 직접 확인하셔야 합니다.

✅What is the difference between fetch and XMLHTTPRequest?
물론 제가 한 건 아니지만 그냥 멋있는 사진이에요

물론 더 많은 차이점이 있지만 지금 나열하는 것은 의미가 없습니다. 왜냐하면 모든 매개변수로 볼 때 이것은 단순히 최신 브라우저 요구 사항에 대한 이전 표준의 향상된 버전일 뿐이라는 것이 분명하기 때문입니다.

후문

처음에는 가져오기가 새로운 표준인 한 줄을 작성하려고 생각했지만 실제로는 말할 수 있는 멋진 내용이 많이 있는데 너무 단순하고 유익하지 않을 것입니다. 가져오기에 관한 전체 기사를 작성할 수 있지만 이 기사에는 특별한 요점이 없습니다. 하지만 제 생각에는 전반적으로 모든 것이 괜찮아 보입니다.

글을 읽어주셔서 진심으로 감사드립니다!