웹에서 AJAX에 대한 가장 나쁜 비밀 중 하나는 이를 위한 기본 API 인 XMLHttpRequest가 실제로 우리가 사용했던 용도로 만들어지지 않았다는 것입니다. XHR을 중심으로 우아한 API를 만들기 위해 잘 해왔지만 더 잘할 수 있다는 것을 알고 있습니다.
더 잘하기 위한 우리의 노력은 fetch API입니다. 이제 Firefox 및 Chrome Canary에서 사용할 수 있는 새로운 window.fetch 메서드를 기본적으로 살펴 보겠습니다.
XMLHttpRequest
XHR은 제 생각에 약간 복잡합니다. "XML"이 대문자이지만 "Http"가 낙타 인 이유에 대해 설명하지 마십시오. 어쨌든, 이것이 지금 XHR을 사용하는 방법입니다.
// Just getting XHR is a mess!
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
// Open, send.
request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);물론 Google의 자바 스크립트 프레임 워크는 XHR 작업을 더욱 즐겁게 만들지만 위에 표시된 것은 XHR 혼란의 간단한 예입니다.
기본 fetch 사용법
이제 첫 번째 인수가 URL인 fetch 함수가 전역 창 범위에 제공됩니다.
// url (required), options (optional)
fetch('https://davidwalsh.name/some/url', {
method: 'get'
}).then(function(response) {
}).catch(function(err) {
// Error :(
});업데이트 된 Battery API와 마찬가지로 fetch API는 JavaScript Promises를 사용하여 결과 / 콜백을 처리합니다.
// Simple response handling
fetch('https://davidwalsh.name/some/url').then(function(response) {
}).catch(function(err) {
// Error :(
});
// Chaining for more "advanced" handling
fetch('https://davidwalsh.name/some/url').then(function(response) {
return //...
}).then(function(returnedValue) {
// ...
}).catch(function(err) {
// Error :(
});아직 익숙하지 않다면 익숙해 지십시오. 곧 모든 곳에 있을 것입니다.
Request Headers
요청 헤더를 설정하는 기능은 요청 유연성에 중요합니다. new Headers()를 실행하여 요청 헤더로 작업 할 수 있습니다.
// Create an empty Headers instance
var headers = new Headers();
// Add a few headers
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');
// Check, get, and set header values
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');
// Delete a header
headers.delete('X-My-Custom-Header');
// Add initial values
var headers = new Headers({
'Content-Type': 'text/plain',
'X-My-Custom-Header': 'CustomValue'
});append, has, get, set 및 delete 메서드를 사용하여 요청 헤더를 수정할 수 있습니다. 요청 헤더를 사용하려면 Request 인스턴스를 만듭니다.
var request = new Request('https://davidwalsh.name/some-url', {
headers: new Headers({
'Content-Type': 'text/plain'
})
});
fetch(request).then(function() { /* handle response */ });응답 및 요청이 수행하는 작업을 살펴 보겠습니다!
Request
Request 인스턴스는 가져 오기 호출의 요청 부분을 나타냅니다. Fetch a Request를 전달하여 고급 및 사용자 정의 요청을 만들 수 있습니다.
샘플 요청 사용은 다음과 같습니다.
var request = new Request('https://davidwalsh.name/users.json', {
method: 'POST',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain'
})
});
// Now use it!
fetch(request).then(function() { /* handle response */ });첫 번째 매개 변수 인 URL 만 필요합니다. 각 속성은 Request 인스턴스가 생성 된 후에 만 읽기가 됩니다. 또한 Request에는 Service Worker API 내에서 가져 오기를 사용할 때 중요한 복제 메소드가 있습니다. 요청은 스트림이므로 다른 가져 오기 호출로 전달할 때 복제해야 합니다.
그러나 가져 오기 서명은 요청처럼 작동하므로 다음을 수행 할 수도 있습니다.
fetch('https://davidwalsh.name/users.json', {
method: 'POST',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain'
})
}).then(function() { /* handle response */ });요청 및 가져 오기 서명이 동일 할 수 있으므로 서비스 워커 내에서 요청 인스턴스 만 사용할 수 있습니다. ServiceWorker 게시물이 곧 제공됩니다!
Response
fetch의 then 메서드에는 Response 인스턴스가 제공되지만 수동으로 Response 객체를 생성 할 수도 있습니다. 서비스 워커를 사용할 때 발생할 수 있는 또 다른 상황입니다. 응답으로 다음을 구성 할 수 있습니다.
// Create your own response for service worker testing
// new Response(BODY, OPTIONS)
var response = new Response('.....', {
ok: false,
status: 404,
url: '/'
});
// The fetch's `then` gets a Response instance back
fetch('https://davidwalsh.name/')
.then(function(responseObj) {
console.log('status: ', responseObj.status);
});응답은 다음 방법도 제공합니다.
Handling JSON
JSON에 대한 요청을 한다고 가정 해 보겠습니다. 결과 콜백 데이터에는 원시 데이터를 JavaScript 객체로 변환하는 json 메서드가 있습니다.
fetch('https://davidwalsh.name/demo/arsenal.json').then(function(response) {
// Convert to JSON
return response.json();
}).then(function(j) {
// Yay, `j` is a JavaScript object
console.log(j);
});물론 이것은 간단한 JSON.parse (jsonString)이지만 json 메서드는 편리한 바로 가기입니다.
Handling Basic Text/HTML Responses
JSON이 항상 원하는 요청 응답 형식은 아니므로 다음은 HTML 또는 텍스트 응답으로 작업 할 수 있는 방법입니다.
fetch('/next/page')
.then(function(response) {
return response.text();
}).then(function(text) {
// Promise의 then 메서드를 text() 메서드와 함께 연결하여 응답 텍스트를 가져올 수 있습니다.
Handling Blob Responses
예를 들어 가져 오기를 통해 이미지를 로드 하려는 경우 약간 다릅니다.
fetch('https://davidwalsh.name/flowers.jpg')
.then(function(response) {
return response.blob();
})
.then(function(imageBlob) {
document.querySelector('img').src = URL.createObjectURL(imageBlob);
});Body mixin의 blob() 메서드는 Response 스트림을 받아 완료 될 때까지 읽습니다.
Posting Form Data
AJAX의 또 다른 일반적인 사용 사례는 양식 데이터 전송입니다. 양식 데이터를 게시하기 위해 가져 오기를 사용하는 방법은 다음과 같습니다.
fetch('https://davidwalsh.name/submit', {
method: 'post',
body: new FormData(document.getElementById('comment-form'))
});JSON을 서버에 게시하려는 경우 :
fetch('https://davidwalsh.name/submit-json', {
method: 'post',
body: JSON.stringify({
email: document.getElementById('email').value,
answer: document.getElementById('answer').value
})
});매우 쉽고, 매우 눈을 즐겁게 합니다!
기록되지 않은 이야기
fetch는 사용하기에 더 좋은 API이지만 현재 API는 요청 취소를 허용하지 않으므로 많은 개발자에게 시작이 아닙니다.
새로운 fetch API는 XHR보다 훨씬 더 안전하고 사용하기 쉽습니다. 결국 AJAX를 올바른 방식으로 수행 할 수 있도록 만들어졌습니다. fetch는 후견인의 이점이 있습니다. 가져 오기가 더 광범위하게 지원 될 때까지 기다릴 수 없습니다!
등록된 댓글이 없습니다.
