외부 API를 사용해서 데이터를 끌어오는 방법 (AJAX, Fetch API & Async/Await)

AJAX

AJAX는 Asynchronous Javascript and XML의 약자이다. (하지만 요즘 많은 API들이 XML 대신 JSON 데이터를 제공한다.) HTML, CSS, JavaScript, DOM 조작 과 XMLHttpRequest 객체를 활용한 프로그래밍 방식으로 AJAX를 사용하는 가장 큰 목적은 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하기 위해서이다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어 비동기식으로 작업할 수 있다.

// XHR 객체 생성
let xhr = new XMLHttpRequest;
// 요청 초기화
xhr.open('GET', '원하는 주소', true);

// XMLHttpRequest 처리가 완료되면 실행
xhr.onload = function()
	{
    	/*
            주로 사용되는 HTTP STATUS
            200 : OK
            404 : ERROR
            403 : FORBIDDEN
        */
    	if (this.status === 200)
        	{
            	console.log(JSON.parse(this.responseText));
            }
    }

// 요청을 전송. 
xhr.send();

 

Fetch API

FetchAPI를 이용하면 Request나 Response와 같은 HTTP 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있다. XMLHttpRequest와 비슷한 기능을 제공하나 더 파워풀하다.

Fetch의 기본 스펙은 jQuery.ajax()와 기본적으로 두가지가 다르다는 사실에 유념해야한다.

• fetch()로부터 반환되는 Promise 객체는 HTTP state code가 400 또는 500 이라도 reject 하지 않는다. (ok 상태를 false로 설정.)
• 기본적으로, fetch는 서버로부터 쿠키를 받거나 보내지 않으므로 사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않은 요청이 발생한다.

// fetch 함수 호출
fetch('원하는 주소')
.then(res => res.json())
.then(data => console.log(data));

 

Async / Await

이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는 표준 동기 함수를 사용하는 것과 많이 비슷하다. 쉽게 말하자면, async / await의 목적은 Promise의 사용을 쉽게하기 위해서 라고 보면되겠다.

async 함수에는 await 식이 포함될 수 있는데 동작 과정은 다음과 같다.

1. async 함수의 실행을 일시 중지.
2. 전달된 Promise의 해결을 기다림.
3. async 함수의 실행을 다시 시작.
4. 완료 후 값을 반환.

await 키워드는 async 함수에서만 유효하다. 

function getSomething1(){
	return Promise.resolve('something');
}

async function getSomething2(){
	return 'something';
}

function f1(){
	return Promise.reject('error');
}

async function f2(){
	return 'error';
}

getSomething1과 getSomething2는 동일한 역할을 한다. f1과 f2도 마찬가지이다.

async function getData()
{
	let response = await fetch('원하는 주소');
	let data = await response.json();
	return data;
}
    
getData()
.then(data => console.log(data));