💻비동기프로그래밍 이해하기

👩🏼‍💻 비동기 프로그래밍이란?

비(not) + 동기적 프로그래밍을 이해하기 위해서는 동기적 프로그래밍에 대해서 먼저 이해야 한다.

동기(synchronous)적 방식이란? 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식

비동기 프로그래밍 ?

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

콜백 지옥이 발생함

콜백 함수를 사용해서 작동 순서를 지정할 경우 코드를 파악하기가 어려워진다.
(들여쓰기 문제, 가독성, 수정이 번거로움 )

기본적으로 프로그래밍은 동기적(순차적) 으로 작동된다.
하지만 서버와 통신할때와 같이 시간이 오래 걸리는 경우 비동기 프로그래밍이 진행된다.

예를들어 ,
1)API요청
2)API받아오기
3)API 뿌리기
를 진행할 때, 요청후 받아오는 중에 3)이 실행 되는 것이다.

이때 2)가 완료될 때까지 기다리게 만드는 것이 필요하다.

이때 사용하는 것이 Promise 객체

promise 객체

(ex) 네이버 카카오 등에 Api 를 요청해서 받는 경우 그 요청값을 의미한다

promise 객체에는
1. 대기 (pending) - 정보 요청 직후 기다리는중
2. 이행 (fulfilled) - 정보가 정상적으로 전달된 상태
3. 거부 (rejected) - 정보 요청 거절 ( 카톡센터 화재같은경우.. ? )
이렇게 세가지 중요한 상태 정보가 담긴다.

각 단계에 맞는 정보를 이용자에게 제공 해야 한다 . (에러 핸들링이 필요함 )

(예) 네이버에 날씨 정보를 요청하여 받아와야 하는데 네이버 서버 다운으로 제공이 안되고 있음
우리 홈페이지는 이상이 없고 네이버 api제공 문제 발생이라면? 이용자에게 해당 정보를 제공하여야 함

promise객체가 갖는 상태정보 3가지에 따라 적절한 처리를 할 수 있는 방법 알기

🐥Promise 객체를 다루는 방법 - then ~ catch ,async / await

ES6 문법에서 사용하는 then과 catch
then ~ catch

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

각각
.then - 정상처리 되었을때 response콜백함수로 받으며 응답값을 받음
응답값 안에는 (response.data로 객체로 받음)
.catch - 거부되었을 때 error 객체에 들어가게 됨 ( 어떤 에러가 나오는지 명세서에서 확인 할 수 있음 에러 코드가 분류가 되어 있어 각 에러코드가 어떤 것을 의미하는지 조치를 취해줘야 함)
.finally -이행 or 거부 되었을 때 항상 실행되는 함수 를 작성해주어야 한다.

즉, 정상 처리 되었을때 .then + .fianlly 부분이 실행되고
오류일때는 .cach + .finally 부분이 실행됨

(참고 ) 각각 받아온 객체를
.then .catch 등으로 사용할 수 있다.

ES7 문법에서 사용하는 async와 await
async / await

async= 비동기 함수를 의미함
async () => {} 로 작성하며
{}함수 실행 부분에서 await를 만나면 해당 부분이 완료 될 때 까지 기다렸다가 이후가 실행됨

< 비교하기 >
1)

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

2)

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

1)에서는 api를 받아오는데 시간이 소요되기 때문에 정상처리 되기 전에 error코드가 실행된다.
따라서 axious 앞에 await를 작성하여 get 작업이 끝날때 까지 console.log ( 다음작업) 이 실행 되지 않도록 한다.

🤓 요약하자면..

비동기프로래밍 promise를 사용하는 이유는 ?

비동기 프로그래밍을 동기적 프로그래밍으로 사용해야 하기 때문에
1)네이버에서 날씨 요청하여
2) 네이버가 날씨를 보내주고
2) 받아온 날씨 데이터를 화면에 보여주어야 한다.

즉, 받아온Api 정보를 객체로 활용 해야 하기 때문에

이때 사용하는것이 then - catch , async - await 이다