FetchAPI에서 비동기 처리를 시도했습니다.

니지박스 Advent Calendar 2015 15일째 기사입니다.

FetchAPI란?

FetchAPI는 ES6(ECMAScript6)의 Promise 객체를 기반으로 설계된 비동기 처리 API입니다. 장기간에 걸쳐, JavaScript에 의해 비동기 처리가 XHR(XMLHttpRequest)로 실시합니다. 2005에서 jQuery를 대표로 한 Ajax에서 단번에 유명해진 XHR이 이번 시점에서 보면 관심의 분리를 할 수 없는 등 디자인상의 실수가 있습니다. 이러한 부족점을 없애고 향후 XHR을 완전히 대체할 수 있다는 것은 FetchAPI입니다.

이 링크가 일본어화된 FetchAPI 소개입니다. Fetch Standard 한국어 번역

FetchAPI를 사용해 봅시다.

먼저 XHR에서 간단한 비동기 처리 샘플을 준비합니다.

var url = "test.json";
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Error!");
};

xhr.send();

위의 샘플을 FetchAPI로 작성하면 이렇게 됩니다.

var url = "test.json";
fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Error!");
});

설명하려면 약간의 Promise에 대한 지식이 필요하지만 여기에서 할애합니다. Promise의 경우 이 링크를 참조하십시오. Promise
단번에 상쾌하게 되었습니다. 위의 코드를 ES6의 애로우 함수로 다시 작성하면 더욱 간단해집니다.

var url = "test.json";
fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Error!"))

더욱 간결해졌지만, 어쩐지 callback 연쇄 기미가 있습니다.
여기서 async/await로 가공하여 진화시킵니다.

var url = "test.json";
var asyncFunc = async function() {
  try {
    let response = await fetch(url);
    let data = response.json();
    console.log(data);
  } catch(e) {
    console.log("Error!");
  }
}

여기까지 오면 비동기 처리의 처리가 마치 동기 처리와 같이 쓸 수 있습니다.

※ async/await가 ES7의 API로 소개하려면 별도의 기사가 되어 버리기 때문에, 할애하고 싶습니다. FetchAPI가 Promise의 객체로서 「await」의 뒤에서 붙어 이용할 수 있는 것이 포인트가 됩니다.

FetchAPI 참고 사항

XHR과 달리 FetchAPI로 요청하는 경우 기본적으로 쿠키가 없는 사양입니다. 쿠키를 붙이는 경우는 아래와 같이 하지 않으면.

fetch(url, {credentials: 'include'})

각 브라우저에 대한 지원이 아직 앞으로입니다. FetchAPI의 지원 상황은 낙관적이지 않습니다.

각 브라우저의 ES6 지원

요약

올해 출시된 ES6은 여전히 ​​각 브라우저에 대한 지원이 불충분하지만 XHR보다 잘 설계된 FetchAPI가 점차 주류가 될 것입니다. 쾌적하다고는 할 수 없는 지금의 비동기 처리 제작이나 디버그가, FetchAPI에 의해 하기 쉬워진다고 나는 그렇게 생각합니다.