[TIL - 비동기적 프로그래밍 입문]

동기적 방식 : 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식

• 일반적인 프로그래밍 세계에서는 코드는 모두 동기적으로 실행된다. (앞선코드가 끝나야 다음 코드 수헹)

비동기적 방식

• 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
• setTimeout, addEventListener 등
• 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
• 대표적으로 서버 통신과 관련된 로직들 포함

콜백 지옥

1. 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬인 경우
2. 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생
3. 가독성, 수정 어려움

Promise

• promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.
• 비동기 작업은 수행의 제어권을 제 3자에게 넘겨준 후 작업이 완료되면 안내를 받아 제어권을 이양받는 식의 일처리 방법을 의미한다.
• 비동기처리는 약속에 의해 움직인다. 그리고 그 약속에 괸련된 사항들이 모두 Promise객체에 담긴다고 할 수 있다.

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

1. 대기 : pending. 요청한 직후. 아직 성공 또는 실패되지 않은 상태.
2. 이행 : fullfilled, 정상적으로 데이터를 불러와 전달을 성공적으로 해준 상태.
3. 거부 : rejected, 데이터 전달을 못해준 경우.

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);
  // 1. 정상적으로 처리 되었을 때
}) 

.catch(error => {
	console.log('오류가 발생하였습니다 : ' + error);
  //2. 오류가 발생했을 때
})
.finally(()=>{
	console.log('항상 실행되는 부분입니다!');
  // 3. 항상 실행되는 부분
});

// 정상적으로 실행되면 1, 3이 찍히고 오류가 발생했을 때는 2, 3이 찍힌다.

• async/ await (ES7)

const getWeather = async () => {
	try {
		const response = await axios.get('http://api.naver.com/weather/today');
		console.log('정상처리 되었습니다 : ' + response);
      // 정상처리가 끝날 때까지 console에 찍히지않고 기다림
      // await가 없으면 정상적으로 처리 되기 전에 console에 찍혀버림.
      // await : axiot.get 줄이 끝날 때까지 기다렸다가 넘어간다.
      
	} catch (error) {
		console.log('오류가 발생하였습니다 : ' + error);
	}
}

코드를 짤 때는 일의 순서가 중요하다.