분류 javascript

fetch API

컨텐츠 정보

  • 조회 272 (작성일 )

본문

웹에서 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를 전달하여 고급 및 사용자 정의 요청을 만들 수 있습니다.

  • method - GET, POST, PUT, DELETE, HEAD
  • url - URL of the request
  • headers - associated Headers object
  • referrer - referrer of the request
  • mode - cors, no-cors, same-origin
  • credentials - should cookies go with the request? omit, same-origin
  • redirect - follow, error, manual
  • integrity - subresource integrity value
  • cache - cache mode (default, reload, no-cache)

샘플 요청 사용은 다음과 같습니다.

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 객체를 생성 할 수도 있습니다. 서비스 워커를 사용할 때 발생할 수 있는 또 다른 상황입니다. 응답으로 다음을 구성 할 수 있습니다.

  • type - basic, cors
  • url
  • useFinalURL - Boolean for if url is the final URL
  • status - status code (ex: 200, 404, etc.)
  • ok - Boolean for successful response (status in the range 200-299)
  • statusText - status code (ex: OK)
  • headers - Headers object associated with the 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);
	});

응답은 다음 방법도 제공합니다.

  • clone() - Creates a clone of a Response object.
  • error() - Returns a new Response object associated with a network error.
  • redirect() - Creates a new response with a different URL.
  • arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
  • blob() - Returns a promise that resolves with a Blob.
  • formData() - Returns a promise that resolves with a FormData object.
  • json() - Returns a promise that resolves with a JSON object.
  • text() - Returns a promise that resolves with a USVString (text).

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는 후견인의 이점이 있습니다. 가져 오기가 더 광범위하게 지원 될 때까지 기다릴 수 없습니다!


https://davidwalsh.name/fetch