비동기 프로그래밍

동기적 프로그래밍이란?

현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식.
일반적인 프로그래밍 세계에서는 코드는 모두 동기적으로 실행된다. 즉, 앞선 코드가 끝나야만 다음 코드가 수행된다.

비동기적 프로그래밍이란?

실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식

1. setTimeount, addEventListner 등
2. 별도의 요청, 실행대기, 보류 등과 관련된 코드는 모두 비동기적 코드
3. 대표적으로 서버 통신과 관련된 로직들 포함

비동기적 프로그램이의 과거 문제점

비동기적 프로그래밍을 하다보면 예기치 못 한 문제에 마주치게 되는데 그게 콜백지옥이다.
콜백지옥은 차후에 더 자세히 다뤄보자.
콜백지옥을 해결하기 위해서 ES6에서 Promise 객체가 소개되었다.

Promise 객체

"Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타냅니다." - Mdn 공식문서

일반적인 코드를 작동시킬 때는 제어권을 가지고 있다가 외부 API를 호출하는 등의 상황에서는 제어권이 외부 api에 넘어가게 된다. 가령 네이버 날씨에 대한 api를 받아오면 데이터를 받기 전까지는 데이터를 활용한 코드를 실행할 수 없을테니까.
비동기처리는 이처럼 '약속'에 의해 움직인다. 그래서 Promise객체라고 부르고, 약속에 관련된 사항들이 모두 Promise 객체에 담기게 된다.

Promise 객체에 담기는 주요한 상태정보

1. 대기 : pending, localhost에서 네이버에 요청한 직후. 아직 성공(resolve) 또는 실패(rejected)되지 않은 상태
2. 이행 : fulfilled, 네이버가 정상적으로 데이터를 localhost에게 전달을 성공적으로 해준 상태
3. 거부 : rejected, 이유는 알 수 없지만 localhost가 데이터를 받지 못 한 상태

Promise 객체 핸들링 방법

#then ~ catch

// http://api.naver.com/weather/today 로 요청을 한다고 가정합시다.

axios.get('http://api.naver.com/weather/today')
.then(response => {
	console.log('정상처리 되었습니다 : ' + response);
})
.catch(error => {
	console.log('오류가 발생하였습니다 : ' + error);
})
.finally(()=>{
	console.log('항상 실행되는 부분입니다!');
});

#async / await

const getWeather = async () => {
	try {
		const response = await axios.get('http://api.naver.com/weather/today');
		console.log('정상처리 되었습니다 : ' + response);
	} catch (error) {
		console.log('오류가 발생하였습니다 : ' + error);
	}
}