비동기 프로그래밍

비(not) + 동기적 프로그래밍.

• 동기(synchronous)적 방식이란?
  1. 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
• 비동기(asynchronous)적 방식이란? 
  1. setTimeout, addEventListner 등
  2. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
  3. 대표적으로 서버 통신과 관련된 로직들 포함

 

콜백지옥
1. 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우

2. 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생

3. 가독성, 수정 어려움

- 이를 해결하기 위해 Promise 객체가 소개되었다.

# 비동기 프로그래밍을 다룬다는 것은 Promise 객체를 다룬다는 의미와 일치.

 

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

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

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

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 = axios.get('http://api.naver.com/weather/today');
		console.log('정상처리 되었습니다 : ' + response);
	} catch (error) {
		console.log('오류가 발생하였습니다 : ' + error);
	}
}