Fetch API [번역]

September 30th 2018

> 이 글은 [Fetch API](https://davidwalsh.name/fetch)의 번역문입니다.

웹의 AJAX와 관련된 불편한 진실 중 한가지는 XMLHttpRequest이 사실은 우리가 사용하고 있는 용도로 고안된 것이 아니라는 점이니다. 지금까지 우리는 XHR을 이용해 훌륭한 API를 만들었지만, 이제는 Fetch API를 사용할 수 있습니다. 그런면 windonw.fetch method의 기본적인 내용에 대해서 살펴보겠습니다.

Basic fetch Usage

fetch funtion은 global(window) scope에서 사용할 수 있으면, 첫 argumentsms URL입니다.

// url (required), options (optional)
fetch('https://davidwalsh.name/some/url', {
  method: 'GET'
})
  .then(function(response) {})
  .catch(function(err) {
    // Error :(
  });

Fetch API는 result와 callback을 다루기 위해서 자바스크립트 프로미스를 이용합니다.

// Simple response handling
fetch('https://davidwalsh.name/some/url')
  .then(function(response) {})
  .catch(function(err) {
    // Error :(
  });

// Chaning for more "advanced" handling
fetch('https://davidwalsh.name/some/url')
  .then(function(resonse) {
    return; //...
  })
  .then(function(returnValue) {
    // ...
  })
  .catch(function(err) {
    // Error :(
  });

아직 then method가 낯설다면 익숙해 지도록 하세요. 곧 널리 사용될 것입니다.

Request Headers

Request Header를 설정하는 것은 request는 유연하게 처리하기 위한 중요한 사항입니다. Request header 설정을 위해 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': 'CustomVaue'
});

Header를 수정하기 위해 append, has, get, set, delete method를 사용할 수 있습니다. Request header를 이용하려면 Request instance를 생성해야 합니다.

var request = new Request('https://davidwalsh.name/some-url', {
  headers: new Headers({
    'Content-Type': 'text/plain'
  })
});

fetch(request).then(function() {
  /* handle response */
});

그러면 Response와 Request가 어떤 역할을 하는지 알아보겠습니다.

Handmade with .