웹 애플리케이션에서 JavaScript는 XMLHttpRequest를 사용합니다. (XHR)은 페이지 통신을 효과적으로 향상시키는 기술인 비동기 요청을 수행합니다. Ajax 기술이라고 하면 일반적으로 XMLHttpRequest 기반의 Ajax를 의미합니다. 하지만 Ajax는 유용하지만 최고의 API는 아닙니다. 업무 분리, 입력, 출력 및 이벤트와 함께 추적되는 상태를 단일 객체로 혼합하는 원칙을 따르도록 설계되지 않았습니다. 게다가 이벤트 기반 모델은 이제 JavaScript는 널리 사용되는 Promise 및 생성기 기반 비동기 프로그래밍 모델과 상충됩니다. 이 기사에서 소개할 내용은 XMLHttpRequest를 대체하는 최신 기술입니다. W3C의 공식 표준인 Fetch API입니다.
호환성
소개하기 전에 Fetch API에 대한 현재 주류 브라우저 지원을 살펴보겠습니다.
Fetch 지원은 아직 진행 중입니다. Firefox 39 이상 및 Chrome 42의 초기 단계 위의 사항이 모두 지원됩니다.
지금 사용하고 싶다면 Fetch Polyfil을 사용하여 아직 Fetch를 지원하지 않는 분들도 지원할 수 있습니다. 브라우저.
Fetch를 사용하기 전에 기능 테스트를 수행할 수도 있습니다.
if(self.fetch) {
// run my fetch request here
} else {
// do something with
XMLHttpRequest?
}간단한 가져오기 예시
Fetch API에서 가장 일반적으로 사용되는 함수는 fetch() 함수입니다. URL 매개변수를 수신하고 응답을 처리할 것을 약속합니다. response는 응답 객체입니다.
fetch("/data.json").then(function(res)
{
// res instanceof Response ==
true.
if (res.ok) {
res.json().then(function(data) {
console.log(data.entries);
});
} else {
console.log("Looks like the response wasn't
perfect, got status", res.status);
}
}, function(e) {
console.log("Fetch failed!", e);
});fetch()는 두 번째 선택적 매개변수인 다양한 구성을 제어할 수 있는 init 객체를 허용합니다. 제출하는 경우 POST 요청의 코드는 다음과 같습니다:
fetch("http://www.example.org/submit.php",
{
method: "POST",
headers: {
"Content-Type":
"application/x-www-form-urlencoded"
},
body:
"firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(function(res) {
if (res.ok) {
//res.ok用于检测请求是否成功
console.log("Perfect! Your settings are
saved.");
} else if (res.status == 401) {
console.log("Oops! You are not
authorized.");
}
}, function(e) {
console.log("Error submitting
form!");
});네트워크 오류가 있는 경우 fetch() 약속은 다음과 같이 거부됩니다. TypeError 개체입니다. fetch() 성공 여부를 정확하게 판단하려면 Promise 해결 상황을 포함시켜야 하며 이때 Response.ok를 판단해야 합니다. 사실이다.
Fetch는 GlobalFetch, Headers, Request 및 4가지 인터페이스를 구현합니다. 응답. GloabaFetch에는 네트워크 리소스를 얻기 위한 가져오기 메서드가 하나만 포함되어 있으며 나머지 세 개는 해당 HTTP 개념과 직접적으로 일치합니다. 또한, 요청/응답에서 Body도 혼란스러워집니다.
헤더
헤더 인터페이스를 통해 HTTP 정의 가능 요청 헤더(Request.headers) 및 응답 헤더(Response.headers). Headers 객체는 단순한 다중 이름 값 쌍입니다:
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type",
"text/plain");
myHeaders.append("Content-Length",
content.length.toString());
myHeaders.append("X-Custom-Header",
"ProcessThisImmediately");또한 다차원 배열이나 객체 리터럴을 전달할 수도 있습니다:
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length":
content.length.toString(),
"X-Custom-Header":
"ProcessThisImmediately",
});, 헤더 인터페이스는 설정, 삭제 및 기타 API를 제공합니다. 내용을 검색하는 데 사용됩니다.
console.log(reqHeaders.has("Content-Type")); //
true
console.log(reqHeaders.has("Set-Cookie")); //
false
reqHeaders.set("Content-Type",
"text/html");
reqHeaders.append("X-Custom-Header",
"AnotherValue");
console.log(reqHeaders.get("Content-Length"));
// 11
console.log(reqHeaders.getAll("X-Custom-Header")); //
["ProcessThisImmediately", "AnotherValue"]
reqHeaders.delete("X-Custom-Header");
console.log(reqHeaders.getAll("X-Custom-Header")); //
[]일부 작업은 ServiceWorkers에서만 사용되지만 상대적으로 XHR 자체는 헤더 작동에 매우 편리한 API를 제공합니다.
보안상의 이유로 일부 헤더 필드는 사용자 에이전트를 통해서만 설정할 수 있습니다. 구현은 프로그래밍 방식으로 설정할 수 없습니다. 요청 헤더 금지 필드 및 응답 헤더 금지 필드.
잘못된 HTTP Header 속성 이름을 사용하거나 쓸 수 없는 속성을 쓴 경우 Headers 메소드는 일반적으로 TypeError 예외를 발생시킵니다.
var myResponse = Response.error();
try {
myResponse.headers.set("Origin",
"http://mybank.com");
} catch(e) {
console.log("Cannot pretend to be a
bank!");
}가장 좋은 방법은 사용하기 전에 콘텐츠 유형이 올바른지 확인하는 것입니다.
fetch(myRequest).then(function(response)
{
if(response.headers.get("content-type") ===
"application/json") {
return response.json().then(function(json)
{
// process your JSON further
});
} else {
console.log("Oops, we haven't got
JSON!");
}
});헤더는 요청 요청이나 응답 요청을 받고 쓰기 가능한 매개변수를 지정하는 Headers 객체에는 특수한 보호 속성이 있습니다. 이 속성은 웹에 노출되지 않지만 어떤 콘텐츠가 표시될 수 있는지에 영향을 미칩니다. 헤더 개체가 변경되었습니다.
가능한 값은 다음과 같습니다.
없음: 기본값
r
아아아앙요청
요청 인터페이스는 HTTP를 통해 리소스를 요청하기 위한 요청 형식을 정의합니다.
equest：从 request 中获得的 headers（Request.headers）只读 request-no-cors：从不同域（Request.mode no-cors）的 request 中获得的 headers 只读 response：从 response 中获得的 headers（Response.headers）只读 immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只读
fetch()와 동일하며 요청은 두 번째 선택적 매개변수인 init를 허용하여 다양한 구성을 제어합니다. 개체:
var req = new
Request("/index.html");
console.log(req.method); // "GET"
console.log(req.url); //
"http://example.com/index.html"
console.log(req.headers);
//请求头모드 속성은 도메인 간 요청이 허용되는지 여부와 읽을 수 있는 응답 속성을 결정하는 데 사용됩니다. 방법 선택적 속성 값:
same-origin: 요청은 동일 출처 정책을 따릅니다.
no-cors: 기본값, CDN의 스크립트, 다른 도메인의 이미지 및 기타 교차 도메인 리소스 허용 (전제조건은 메소드는 HEAD, GET 또는 POST만 가능)
cors: 교차 도메인이 허용되며 요청은 CROS 프로토콜을 따릅니다.
credentials 열거 속성은 도메인 전체에서 쿠키를 얻을 수 있는지 여부를 결정합니다. XHR과 일치 withCredentials 플래그는 동일하지만 생략(기본값), 동일 출처 및 포함이라는 세 가지 값만 갖습니다.
응답
응답 인스턴스는 fench()가 Promise를 처리한 후입니다. 나중에 반환되는 인스턴스는 JavaScript를 통해 생성될 수도 있지만 ServiceWorkers 내에서만 실제로 유용합니다. responseWith()를 사용할 때 메서드를 사용하고 요청을 수락하기 위한 사용자 지정 응답을 제공합니다.
var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' ,
credentials: true,
body: "image data"};
var myRequest = new
Request('flowers.jpg',myInit);
fetch(myRequest,myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL =
URL.createObjectURL(myBlob);
myImage.src = objectURL;
});Response() 생성자는 응답 데이터 본문과 초기화 객체라는 두 가지 선택적 매개변수를 허용합니다. Request()에서 허용하는 초기화 매개변수는 유사합니다.)
가장 일반적인 응답 속성은 다음과 같습니다.
var myBody = new Blob();
addEventListener('fetch', function(event)
{
event.respondWith(new Response(myBody,
{
headers: { "Content-Type" : "text/plain"
}
});
});Body
요청과 응답 모두 Body 인터페이스를 구현합니다. 요청 프로세스, 둘 다 수행됩니다. 다음 유형 중 하나의 인스턴스일 수 있는 Body:
ArrayBuffer ArrayBufferView Blob/file URLSearchParams FormData
此外，Request 和 Response 都为他们的body提供了以下方法，这些方法都返回一个Promise对象:
arrayBuffer() blob() json() text() formData()
以上就是XML Http Request最新替代技术—— Fetch 的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
