fetch API를 이용하여 REST API 호출

AJAX란 무엇인가?

AJAX는 XMLHttpRequest(XHR)과 Javascript와 DOM을 이용하여 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어다. 하지만 만들어진지 꽤 오래되기도 했고, 이보다 사용하기 쉬운 표준 API가 등장했다.

 

fetch API

별도의 라이브러리는 필요 없고 최신 브라우저에 내장되어 있다. 사용이 아주 쉽고 Primise타입의 객체를 반환한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다. fetch API는 다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등등 다양한 일을 페이지 새로고침 없이 수행한다.

 

2개의 API를 순차 호출

아래 코드는 2개의 API를 순차적으로 호출한다. 즉 url1에대한 호출이 완료되면 url2를 호출하게 되는 구조이다.

var url1 = "http://localhost:8080/test.do";
var url2 = "http://localhost:8080/test.do";
fetch(url1).then(response => {
    return response.json();
}).then(json => {
    console.log("First", json);
    return fetch(url2);
}).then(response => {
    return response.json();
}).then(json => {
    console.log("Second", json);
}).catch(function (error) {
    console.warn(error);
});

url1에대한 API호출이 성공한다면 url2에대한 API호출이 실행된다. 이 두개 API 호출에 문제가 없다면 아래와 같이 결과를 받을 수 있다.

그런데 위와 같이 호출하는 경우, 첫번째 API 호출에서 문제가 발생한다면 2번째 API가 호출되지 않을 수 있다.
따라서 API가 종속적이지 않다면 순차 호출하지 않고 동시에 호출해서 결과를 취합하여 응답받는 것이 효율적이다.

아래 코드는 2개의 API를 동시에 호출하고 결과를 취합하여 응답을 받는다.

var url1 = "http://localhost:8080/test.do";
var url2 = "http://localhost:8080/test.do";
Promise.all([fetch(url1), fetch(url2)]).then(responses => {
    return Promise.all(responses.map(response => {
        return response.json();
    }));
}).then(json => {
    console.log(json);
}).catch(error => {
    console.log(error);
});

결과는 아래와 같다.

물론 3개도 동시에 호출가능하다.

var url1 = "http://localhost:8080/test.do";
var url2 = "http://localhost:8080/test.do";
var url3 = "http://localhost:8080/test.do";
Promise.all([fetch(url1), fetch(url2), fetch(url3)]).then(responses => {
    return Promise.all(responses.map(response => {
        return response.json();
    }));
}).then(json => {
    console.log(json);
}).catch(error => {
    console.log(error);
});

결과는 아래와 같다