[React] 비동기 프로그래밍 입문 - Promise 객체

Promise 객체

• 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타낸다.

  근데… 이름이 왜 ‘약속’ 일까?
  비동기 작업이라는 것은, 수행의 제어권을 제 3자에게 넘겨준 후 작업이 완료되면 안내를 받아 제어권을 이양받는 식의 일 처리 방법을 의미한다.
  예를들어, localhost:3000에서 잘 놀고 있다가, 버튼을 클릭해서 네이버 서버에 날씨 정보를 달라고 API 문서에 적혀있는대로 요청을 했다. 그러면 그 API 문서에 적혀있는 약속대로 약 0.3sec가 지나고 나니 데이터가 들어오게 된다.
  위 과정에서 localhost에 있을 때의 모든 제어권은 나에게 있다가, 네이버에 api 요청을 하는 순간 제어권은 네이버에게 넘어간다. 그 이후 데이터를 전달받는 순간 다시 제어권은 나에게 넘어온다.
  이처럼 비동기처리는 ‘약속’에 의해 움직인다. 그 약속에 관련된 사항들이 모두 Promise 객체에 담기는 것이다.

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

1. 대기 : pending, localhost에서 네이버에 요청한 직후, 아직 성공(resolve) 또는 실패(rejected)되지 않은 상태. 초조한 상태 그 잡채

2. 이행 : fulfilled, 네이버가 정상적으로 데이터를 localhost한테 전달을 성공적으로 해준 상태.

3. 거부 : rejected, 어떠한 이유인지는 모르겠지만 네이버가 localhost에게 데이터 전달을 못해준 상태.

Promise 객체 핸들링 방법

promise 객체가 갖는 주요한 상태정보 3가지에 따라, 우리는 적절한 처리를 해줘야한다.

then ~ catch (ES6)

// 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 (ES7)

const getWeather = async () => {
	try {
		const response = await axios.get('http://api.naver.com/weather/today');//await가 붙었으니, 이 줄이 끝날때까지 밑으로 안내려 간다! // axios.get이 끝날때까지 await했다가 밑에 줄로 넘어간다.
		console.log('정상처리 되었습니다 : ' + response);
	} catch (error) {
		console.log('오류가 발생하였습니다 : ' + error);
	}
}