xmlhttprequest vs ajax의 Fetch API
- Christopher Nolan원래의
- 2025-02-14 09:33:12664검색
JavaScript에서 Fetch API와 XMLHTTPREQUEST는 모두 HTTP 요청을하는 데 사용되지만 Fetch API는 일반적으로 약속을 사용하기 때문에 더 강력하고 유연한 것으로 간주되므로 코드 및 오류 처리를 단순화합니다. 그러나 모든 브라우저가 Fetch API, 특히 이전 브라우저를 지원하는 것은 아닙니다.
-
Fetch API는 모든 XHR 기능을 지원하지 않으며 일부 옵션이 번거롭기 때문에 Ajax 기술을 완전히 대체하지는 않습니다. 또한 시간 초과를 지원하지 않으므로 오류 캡처 구현이 더 복잡합니다.
-
Fetch API에는 한계가 있지만 JavaScript에서 HTTP 요청을하는 미래 방향입니다. 그러나 비교적 새롭고 끊임없이 변화하기 때문에 개발자는 향후 몇 년 동안주의해서 사용해야합니다. - xmlhttprequest와 fetch api
- >
ajax는 비동기 JavaScript 및 XML의 약어입니다. "Async"는 확실히 정확하지만 :
xmlhttprequest에 대한 심층적 인 이해
다음 JavaScript 코드는 XMLHTTPREQUEST (일반적으로 XHR로 약어)를 사용하여
https://www.php.cn/link/f589A241141007EB225CD68EED7BC06C :에 대한 기본 HTTP GET 요청을 발행합니다.<code class="language-javascript">let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');
// 请求状态更改事件
xhr.onreadystatechange = function() {
// 请求完成？
if (xhr.readyState !== 4) return;
if (xhr.status === 200) {
// 请求成功 - 显示响应
console.log(xhr.responseText);
}
else {
// 请求错误
console.log('HTTP error', xhr.status, xhr.statusText);
}
};
// 开始请求
xhr.send();</code>
xmlhttprequest 객체에는 다른 많은 옵션, 이벤트 및 응답 속성이 있습니다. 예를 들어, 밀리 초의 시간 초과를 설정하고 감지 할 수 있습니다.
진행 이벤트는 장기 실행 파일 업로드를보고 할 수 있습니다
의 옵션 수는 눈부신 일 수 있으며 이전 버전의 XMLHTTPREQUEST에는 크로스 브라우저 불일치가 있습니다. 따라서 대부분의 라이브러리 및 프레임 워크는 jQuery.ajax () 메소드와 같은 복잡성을 처리하기위한 Ajax 래퍼 기능을 제공합니다.
<code class="language-javascript">// 设置超时
xhr.timeout = 3000; // 3 秒
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);</code>
빠른 Fetch에 대해 배우십시오
Fetch API는 XMLHTTPREQUEST의 현대적인 대안입니다. 공통 헤더, 요청 및 응답 인터페이스는 일관성을 제공하는 반면, Promise는 콜백없이 더 쉽게 체인 및 비동기/대기 할 수 있습니다. 위의 XHR 예제는 더 간단한 페치 기반 코드로 변환 될 수 있으며, 이는 반환 된 JSON을 구문 분석 할 수도 있습니다.
Fetch는 간단하고 우아하며 이해하기 쉽고 PWA 서비스 작업자에게 널리 사용됩니다. 고대 xmlhttprequest 대신 사용하지 않는 이유는 무엇입니까? <code class="language-javascript">// 上传进度
xhr.upload.onprogress = p => {
console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
};</code>
불행히도 웹 개발은 결코 그렇게 간단하지 않습니다. Fetch는 Ajax 기술을 완전히 대체하지 않았습니다
브라우저 지원
Fetch API는 꽤 잘 지원되지만 모든 버전의 Internet Explorer에서는 실패합니다. 2017 년 이전에 Chrome, Firefox 및 Safari 버전을 사용하는 사용자도 문제를 경험할 수 있습니다. 이 사용자는 사용자 기반의 작은 부분 만 구성하거나 주요 고객 일 수 있습니다. 코딩을 시작하기 전에 확인하십시오!
또한, 페치 API는 비교적 새롭고 성숙한 XHR 객체보다 더 연속적인 변화를받습니다. 이러한 업데이트는 코드를 중단하지는 않지만 향후 몇 년 동안 일부 유지 보수가 필요할 것으로 예상됩니다. <code class="language-javascript">// jQuery Ajax
$.ajax('https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c')
.done(data => console.log(data))
.fail((xhr, status) => console.log('error:', status));</code>
쿠키는 기본적으로 포함되지 않습니다
xmlhttprequest와 달리 모든 페치 구현이 쿠키를 보내는 것은 아니므로 응용 프로그램의 인증이 실패 할 수 있습니다. 이 문제는 두 번째 매개 변수에 전달 된 초기화 옵션을 변경하여 해결할 수 있습니다.
오류는 거부되지 않습니다
놀랍게도, HTTP 오류 (예 : 404 페이지 또는 500 내부 서버 오류)는 페치 약속이 거부되지 않습니다. 일반적으로 응답을 구문 분석하고 설정합니다. OK 상태를 False로 설정합니다.
할인은 요청을 완료 할 수없는 경우에만 발생합니다 (예 : 네트워크 고장). 이렇게하면 오류 캡처 구현이 더욱 복잡해집니다.
타임 아웃은 지원되지 않습니다 <code class="language-javascript">fetch(
'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
{ method: 'GET' }
)
.then( response => response.json() )
.then( json => console.log(json) )
.catch( error => console.error('error:', error) );</code>
페치는 타임 아웃을 지원하지 않으며 요청은 선택한 브라우저가 지속됩니다. 예를 들어 다른 약속으로 페치를 래핑하려면 추가 코드가 필요합니다.
중단 페치
xhr 요청은 xhr.abort ()를 사용하여 쉽게 종료 할 수 있으며 필요한 경우 xhr.onabort 함수를 사용하여 이러한 이벤트를 감지 할 수 있습니다.
몇 년 동안, 페치 중단은 불가능했지만 이제는 AbortController API를 구현하는 브라우저에서 지원됩니다. 이렇게하면 페치 초기화 객체로 전달 될 수있는 신호가 트리거됩니다.
페치는 컨트롤러를 호출하여 중단 될 수 있습니다. abort (); 약속은 거부되므로 .catch () 함수가 호출됩니다.
<code class="language-javascript">let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');
// 请求状态更改事件
xhr.onreadystatechange = function() {
// 请求完成？
if (xhr.readyState !== 4) return;
if (xhr.status === 200) {
// 请求成功 - 显示响应
console.log(xhr.responseText);
}
else {
// 请求错误
console.log('HTTP error', xhr.status, xhr.statusText);
}
};
// 开始请求
xhr.send();</code> 진보 없음
글을 쓰는 시점에서 Fetch는 진행 상황을 지원하지 않습니다. 따라서 파일 업로드 또는 유사한 큰 형태 제출 상태를보고 할 수 없습니다.
Fetch API를 사용한 xmlhttprequest?
응용 프로그램에 진행률 표시 줄을 업로드 해야하는 IE 클라이언트가없는 한.
더 간단한 Ajax 호출의 경우 xmlhttprequest는 더 낮고 복잡하며 함수를 랩핑해야합니다. 불행히도, 시간 초과의 복잡성에 대해 생각하기 시작하고, aborts 호출 및 오류 캡처에 대해서도 Fetch는 함수를 랩핑해야합니다.
Fetch는 미래입니다. 그러나 API는 비교적 새롭고 모든 XHR 기능을 제공하지는 않으며 일부 옵션은 번거 롭습니다. 앞으로 몇 년 동안주의해서 사용하십시오.
xmlhttprequest에 대한 FAQS (FAQS) 및 Fetch Apis
xmlhttprequest와 Fetch API의 주요 차이점은 무엇입니까?
xmlhttprequest 및 Fetch API는 모두 JavaScript에서 HTTP 요청을하는 데 사용됩니다. 그러나 그들은 여러 가지 방법으로 다릅니다. Fetch API는 더 강력하고 유연한 것으로 간주되는 새로운 기술입니다. 그것은 성공 여부에 관계없이 요청에 대한 약속을 반환합니다. Fetch는 또한 요청 및 응답 개체의 공통 정의를 제공합니다. 반면에 Xmlhttprequest는 나이가 많고 약속을 사용하지 않으므로 코드를 더욱 복잡하고 유지 관리하기가 어려울 수 있습니다. 요청 및 응답 개체에 대한 일반적인 정의는 없습니다.
Fetch API가 XMLHTTPREQUEST보다 낫습니까?
Fetch API는 종종 약속 사용으로 인해 JavaScript로 HTTP 요청을하는 데 더 나은 선택으로 간주됩니다. 약속은 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. Fetch API의 기능은 XMLHTTPrequest보다 강력하고 유연합니다. 그러나 XMLHTTPREQUEST는 여전히 널리 사용되고 지원되며 일부 경우 Fetch API를 지원하지 않는 이전 브라우저를 지원해야 할 때와 같이 더 나은 선택이 될 수 있습니다.
Fetch API가 xmlhttprequest를 대체 할 수 있습니까?
예, 페치 API는 http 요청을하는 데 사용되는 javaScript의 XMLHTTPREQUEST를 대체 할 수 있습니다. Fetch API는 새로운 기술이며보다 강력하고 유연한 기능 세트를 보유하고 있습니다. 약속을 사용하여 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. 그러나 XMLHTTPREQUEST는 여전히 널리 사용되고 지원되며 일부 경우 Fetch API를 지원하지 않는 이전 브라우저를 지원해야 할 때와 같이 더 나은 선택이 될 수 있습니다.
Fetch API를 사용하는 장점은 무엇입니까?
Fetch API는 XMLHTTPREQUEST에 비해 몇 가지 장점이 있습니다. 약속을 사용하여 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. Fetch API에는 요청 및 응답 개체의 일반적인 정의를 포함하여보다 강력하고 유연한 기능 세트도 있습니다. 또한 XMLHTTPREQUEST는 그렇지 않지만 다른 소스에 대한 요청을 할 수 있습니다.
Fetch API 사용의 단점은 무엇입니까?
Fetch API 사용의 주요 단점 중 하나는 모든 브라우저가이를 지원하는 것은 아니라는 것입니다. 특히, 이전 브라우저는 Fetch API를 지원하지 않을 수 있습니다. 이 경우 xmlhttprequest 또는 polyfill을 사용해야 할 수도 있습니다. 또 다른 단점은 Fetch API가 기본적으로 쿠키를 보내지 않으므로 쿠키를 보내려면 "포함"에 대한 자격 증명 옵션을 수동으로 설정해야합니다.
xmlhttprequest를 사용하는 장점은 무엇입니까?
xmlhttprequest는 JavaScript로 HTTP 요청을하는 입증 된 기술입니다. 널리 지원되며 모든 브라우저에서 사용할 수 있습니다. Fetch API와 달리 Xmlhttprequest는 기본적으로 쿠키를 보냅니다. 쿠키가 인증 해야하는 서버에 요청할 때와 같은 경우와 같은 일부 경우 이점이 될 수 있습니다.
xmlhttprequest 사용의 단점은 무엇입니까?
xmlhttprequest는 약속을 사용하지 않으므로 코드를보다 복잡하고 유지 관리하기가 어려울 수 있습니다. 또한 요청 및 응답 개체에 대한 일반적인 정의가 없으며 다른 소스를 요청할 수 없습니다. XMLHTTPREQUEST는 Fetch API와 같은 새로운 기술에 비해 약간 구식으로 간주됩니다.
xmlhttprequest 및 fetch api를 선택하는 방법은 무엇입니까?
xmlhttprequest 및 fetch apis 선택은 특정 요구 사항과 지원 해야하는 브라우저에 따라 다릅니다. Fetch API를 지원하지 않는 이전 브라우저를 지원 해야하는 경우 XMLHTTPREQUEST가 더 나은 선택 일 수 있습니다. 그러나 최신 브라우저를 사용하고 있고 Fetch API의 클리너,보다 현대적인 구문 및보다 강력하고 유연한 기능 세트를 활용하려면 Fetch API가 더 나은 선택이 될 것입니다.
같은 프로젝트에서 XMLHTTPREQUEST와 FCTE API를 모두 사용할 수 있습니까?
예, 같은 프로젝트에서 xmlhttprequest와 fetch apis를 모두 사용할 수 있습니다. 특정 작업에 XMLHTTPREQUEST를 사용하고 특정 요구 사항과 지원 해야하는 브라우저를 기반으로 다른 작업에 대해 API를 가져올 수 있습니다. 그러나 일관성과 유지 보수의 용이성을 위해 이들 중 하나를 고수하는 것이 좋습니다.
JavaScript로 HTTP 요청을하기 위해 대체 XMLHTTPREQUEST 및 FCTE API가 있습니까?
예, XMLHTTPREQUEST 및 JavaScript에서 HTTP 요청을위한 API에 대한 몇 가지 대안이 있습니다. 여기에는 Axios, JQuery 's $ .Ajax 및 SuperAgent와 같은 라이브러리가 포함됩니다. 이 라이브러리는 XMLHTTPrequest 및 Fetch API에 비해 HTTP 요청을하고 추가 기능과 편의성을 제공하기 위해 더 높은 수준의 인터페이스를 제공합니다.
<code class="language-javascript">// 设置超时
xhr.timeout = 3000; // 3 秒
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);</code>
빠른 Fetch에 대해 배우십시오 Fetch API는 XMLHTTPREQUEST의 현대적인 대안입니다. 공통 헤더, 요청 및 응답 인터페이스는 일관성을 제공하는 반면, Promise는 콜백없이 더 쉽게 체인 및 비동기/대기 할 수 있습니다. 위의 XHR 예제는 더 간단한 페치 기반 코드로 변환 될 수 있으며, 이는 반환 된 JSON을 구문 분석 할 수도 있습니다.
<code class="language-javascript">// 上传进度
xhr.upload.onprogress = p => {
console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
};</code>
Fetch API는 꽤 잘 지원되지만 모든 버전의 Internet Explorer에서는 실패합니다. 2017 년 이전에 Chrome, Firefox 및 Safari 버전을 사용하는 사용자도 문제를 경험할 수 있습니다. 이 사용자는 사용자 기반의 작은 부분 만 구성하거나 주요 고객 일 수 있습니다.
<code class="language-javascript">// jQuery Ajax
$.ajax('https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c')
.done(data => console.log(data))
.fail((xhr, status) => console.log('error:', status));</code>
쿠키는 기본적으로 포함되지 않습니다
오류는 거부되지 않습니다
<code class="language-javascript">fetch(
'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
{ method: 'GET' }
)
.then( response => response.json() )
.then( json => console.log(json) )
.catch( error => console.error('error:', error) );</code>
<code class="language-javascript">let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');
// 请求状态更改事件
xhr.onreadystatechange = function() {
// 请求完成？
if (xhr.readyState !== 4) return;
if (xhr.status === 200) {
// 请求成功 - 显示响应
console.log(xhr.responseText);
}
else {
// 请求错误
console.log('HTTP error', xhr.status, xhr.statusText);
}
};
// 开始请求
xhr.send();</code> 진보 없음 글을 쓰는 시점에서 Fetch는 진행 상황을 지원하지 않습니다. 따라서 파일 업로드 또는 유사한 큰 형태 제출 상태를보고 할 수 없습니다.
Fetch API를 사용한 xmlhttprequest?
응용 프로그램에 진행률 표시 줄을 업로드 해야하는 IE 클라이언트가없는 한. 더 간단한 Ajax 호출의 경우 xmlhttprequest는 더 낮고 복잡하며 함수를 랩핑해야합니다. 불행히도, 시간 초과의 복잡성에 대해 생각하기 시작하고, aborts 호출 및 오류 캡처에 대해서도 Fetch는 함수를 랩핑해야합니다.
xmlhttprequest에 대한 FAQS (FAQS) 및 Fetch Apis
xmlhttprequest와 Fetch API의 주요 차이점은 무엇입니까?
Fetch API가 XMLHTTPREQUEST보다 낫습니까? Fetch API는 종종 약속 사용으로 인해 JavaScript로 HTTP 요청을하는 데 더 나은 선택으로 간주됩니다. 약속은 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. Fetch API의 기능은 XMLHTTPrequest보다 강력하고 유연합니다. 그러나 XMLHTTPREQUEST는 여전히 널리 사용되고 지원되며 일부 경우 Fetch API를 지원하지 않는 이전 브라우저를 지원해야 할 때와 같이 더 나은 선택이 될 수 있습니다.
Fetch API가 xmlhttprequest를 대체 할 수 있습니까?예, 페치 API는 http 요청을하는 데 사용되는 javaScript의 XMLHTTPREQUEST를 대체 할 수 있습니다. Fetch API는 새로운 기술이며보다 강력하고 유연한 기능 세트를 보유하고 있습니다. 약속을 사용하여 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. 그러나 XMLHTTPREQUEST는 여전히 널리 사용되고 지원되며 일부 경우 Fetch API를 지원하지 않는 이전 브라우저를 지원해야 할 때와 같이 더 나은 선택이 될 수 있습니다.
Fetch API를 사용하는 장점은 무엇입니까?
Fetch API는 XMLHTTPREQUEST에 비해 몇 가지 장점이 있습니다. 약속을 사용하여 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. Fetch API에는 요청 및 응답 개체의 일반적인 정의를 포함하여보다 강력하고 유연한 기능 세트도 있습니다. 또한 XMLHTTPREQUEST는 그렇지 않지만 다른 소스에 대한 요청을 할 수 있습니다.
Fetch API 사용의 단점은 무엇입니까?
xmlhttprequest 사용의 단점은 무엇입니까?
xmlhttprequest 및 fetch api를 선택하는 방법은 무엇입니까?
같은 프로젝트에서 XMLHTTPREQUEST와 FCTE API를 모두 사용할 수 있습니까?
예, 같은 프로젝트에서 xmlhttprequest와 fetch apis를 모두 사용할 수 있습니다. 특정 작업에 XMLHTTPREQUEST를 사용하고 특정 요구 사항과 지원 해야하는 브라우저를 기반으로 다른 작업에 대해 API를 가져올 수 있습니다. 그러나 일관성과 유지 보수의 용이성을 위해 이들 중 하나를 고수하는 것이 좋습니다.
JavaScript로 HTTP 요청을하기 위해 대체 XMLHTTPREQUEST 및 FCTE API가 있습니까? 예, XMLHTTPREQUEST 및 JavaScript에서 HTTP 요청을위한 API에 대한 몇 가지 대안이 있습니다. 여기에는 Axios, JQuery 's $ .Ajax 및 SuperAgent와 같은 라이브러리가 포함됩니다. 이 라이브러리는 XMLHTTPrequest 및 Fetch API에 비해 HTTP 요청을하고 추가 기능과 편의성을 제공하기 위해 더 높은 수준의 인터페이스를 제공합니다.위 내용은 xmlhttprequest vs ajax의 Fetch API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!