💖 비동기 프로그래밍 개요

개념

• not + 동기적 프로그래밍
• 동기적 프로그래밍 : 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
• 비동기 프로그래밍 : 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
  • setTimeout,addEventListner
  • 별도의 요청, 실행대기, 보류 등과 관련 된 코드는 모두 비동기적 코드
  • 대표적으로 서버 통신과 관련된 로직들 포함

콜백지옥

• 비동기 프로그램을 하다 보면 콜백 지옥에 빠지게 된다.
• 예시

//0.5초 주기마다 커피 목록을 수집하고 출력
//각 콜백은 커피 이름을 전달하고 목록에 이름을 추가
//문제점 : 들여쓰기 ㄷㄷ, 값 전달의 순서가 아래 -> 위

setTimeout(function (name) {
	var coffeeList = name;
	console.log(coffeeList);

	setTimeout(function (name) {
		coffeeList += ', ' + name;
		console.log(coffeeList);

		setTimeout(function (name) {
			coffeeList += ', ' + name;
			console.log(coffeeList);

			setTimeout(function (name) {
				coffeeList += ', ' + name;
				console.log(coffeeList);
			}, 500, '카페라떼');
		}, '카페모카');
	}, '아메리카노');
}, '에스프레소');

• 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준이다.

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

• 뭐가 문제? 가독성, 수정도 어려움

• 이를 해결하기 위해 ES6에서 Promise객체가 소개되었다.

  • 비동기 프로그램을 다룬다 == Promise 객체를 다룬다

---

💖 promise 객체

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

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

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

promise 객체 핸들링

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')
    console.log('정상처리 되었습니다 : ' + response)
  } catch (error) {
    console.log('오류가 발생하였습니다 : ' + error)
  }
}

• await가 있는 줄이 끝날 때 까지 밑으로 내려가지 않는다.