(React) 기초 - 비동기 자바스크립트

1. 단순한 프라미스와 Fetch

REST API에 요청을 보내는 일은 상당히 귀찮은 일이었다. REST API로 부터 간단한 데이터를 앱이 받아오려면 20 줄이 넘는 코드를 작성해야 한다. 그 후 Fetch()함수가 등장하면서 구현이 편해졌다.

fetch("https://api.ramdomuser.me/?nat=US&results=1").then(res => 
	console.log(res.json())
);

 

 

then은 프라미스가 정상적으로 완료되면 콜백함수를 한번만 호출한다. 이 콜백함수가 반환하는 값은 그다음에 오는 then 함수의 콜백에 전달되는 인자가 된다. 따라서 성공적으로 처리된 프라미스를 처리하기 위해 then 함수를 연쇄적으로 호출할 수 있다. 

fetch("https://api.ramdomuser.me/?nat=US&results=1")
	.then(res => res.json())
	.then(json => json.results)
	.then(console.log)
	.error(console.error);

 

2. async/await

비동기 프라미스를 처리하는 다른 유명한 방법으로 async함수를 만드는 방법이 있다. async를 사용하는 코드는 전통적인 동기적인 방식과 유사하기 때문에 개발자는 async방식을 더 선호한다. 

const getFakePerson = async() => {
	let res = await fetch("https://api.ramdomuser.me/?nat=US&results=1");
    let { results } = res.json();
    console.log(results);
};

getFakePerson();

여기서 getFakePerson 함수 앞에 async라는 키워드가 있다는 점에 유의하자. 이 함수는 getFakePerson 함수를 비동기 함수로 만들어 준다. 비동기 함수에서는 코드를 진행하기 전에 프라미스가 완료될 때까지 기다릴 수 있다. 

 

const getFakePerson = async() => {
	try {
    	let res = await fetch("https://api.ramdomuser.me/?nat=US&results=1");
        let { results } = res.json();
        console.log(results);
    } catch (error) {
    	console.error(error);
	}
};

getFakePerson();

async와 await를 사용할 때는 프라미스 호출 주변을 try ... catch 블록으로 둘러싸서 정상적으로 완료되지 않은 프라미스에서 발생한 오류를 처리할 필요가 있다.

 

3. 프라미스 만들기

비동기 요청을 하면 발생할수 있는 경우는 2가지 이다. 즉 모든일이 원하는데로 잘 풀리거나, 오류가 생길 수 있다. 요청성공이나 실패에는 다양한 유형이 있다. 예를 들어 성공할 때까지 여러번 다른방법으로 데이터를 가져오라고 시도할 수 있다. 또 여러 유형의 오류를 받을 수 도 있다. 프라미스를 사용하면 간단하게 비동기 작업의 성공이나 실패를 돌려줄 수 있다.

 

getPeople 함수는 새로운 프라미스를 반환한다. 프라미스는 API에 요청을 보낸다. 프라미스가 성공하면 데이터를 읽어온다. 프라미스가 성공하지 않으면 오류를 발생시킨다.

 

const getPeople = count =>
	new Promise(resolves, rejects) => {
    	const api = 'https://api.ramdomuser.me/?nat=US&results={count}';
        const request = new XMLHttpRequest();
        request.open("GET", api);
        request.onload = () =>
        	request.status == 200
            	? resolves(JSON.parse(request.response).results)
                : reject(Error(request.statusText));
            request.onerror = err => rejects(err);
            request.send();
        });
        
        
getPeople(5)
	.then(members => console.log(members))
    .catch(error => console.error('getPeople failed: ${error.message}'))

이 코드로 프라미스가 만들어진다.