//동기(synchornous)적 프로그래밍이란
//=>현재 실행중인 코드가 끝나야 다음코드를 실행하는 방식
//일반적인 프로그래밍에서는 코드는 모두 동기적으로 실행
//비 + 동기적 프로그래밍
//실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
//setTimeout,addEventListner 등
//별도의 요청,실행 대기,보류 등과 관련된 코드는 모두 비동기적
//대표적으로 서버 통신과 관련된 로직들 포함
//콜백지옥
//비동기적 프로그래밍을 하다 보면, 예기치 못한 상황을 마주하곤하는데
//그것은 바로 콜백 지옥
//콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우
//=>함수 1이 실행되야 함수2가 실행되고 함수2가 실행 되야 함수3이 실행되고 ......함수202가..
//주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생
//가독성이 나쁘며 그에 따른 유지 보수 또한 어려움
//이를 해결하기 위해 ES6 에서 Promise객체가 나옴
//앞으로 비동기 프로그래밍을 다룬다는 것은 Promise 객체를 다룬다는 의미와 같음
//Promise객체
//=> 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄
//비동기 작업이라는 것은 수행의 제어권을 제 3자에게 넘겨준 후 작업이 완료 되면
//안내를 받아 제어권을 이양받는 식의 일 처리 방법임
//ex)로컬 사이트에서 버튼을 클릭해 네이버 서버에 날씨정보를 달라고 API에 요청
//그럼 API요청의 약속대로 약 0.3sec가 지나고 데이터가 들어옴
//이처럼 로컬에서 제어권을 네이버에게 준 뒤 데이터를 받음과 동시에 제어권이 넘어옴
//비동기 처리는 이처럼 약속에 의해 움직이는데 그 관련된 약속을 Promise 객체에 담기는 것
//promise 객체에 담기는 주요한 상태정보
//1.대기 :pending, local에서 네이버에 요청 한 직후 아직 성공 또는 실패 되지 않은 상태
//2.이행 :fullfilled,네이버가 정상적으로 데이터를 local한테 전달을 성공적으로 해준 상태
//3.거부 :rejected 네이버에게 요청을 했으나 거부 또는 실패한 상태
//Promise 객체 핸들링 방법
//promise 객체가 갖는 중요한 상태정보 3가지에 따라 적절한 처리를 해줘야 함
//then ~ catch (ES6에서나옴)
//then=>성공 , catch =>실패 ,finally=>성공후 나 실패 후 항상 실행되는 부분
// http://api.naver.com/weather/today 로 요청을 한다고 가정합시다.
//아래의 코드 자체가 promise 객체
.then(response => {
console.log('정상처리 되었습니다 : ' + response);
})
.catch(error => {
console.log('오류가 발생하였습니다 : ' + error);
})
.finally(()=>{
console.log('항상 실행되는 부분입니다!');
});
//async /await (ES7에서나옴)
//async 비동기 함수를 의미
//비동기 요청시 대기 =>성공 또는 실패 로 동작하는데
//await가 없으면 대기 상태에서 바로 콘솔로(다음코드) 넘어가기 때문에 response를 받지 못한 상태에서 넘어가버림
//await 요청의 성공또는 실패를 요청까지 기다린 후 다음 코드를 실행하는 코드임
const getWeather = async () => {
try {
console.log('정상처리 되었습니다 : ' + response);
} catch (error) {
console.log('오류가 발생하였습니다 : ' + error);
}
}
//위의 두가지 방법은 비동기코드를 동기적으로 다뤄야 하는 상황에 적합
//ex) 일의 순서가 1. 네이버에서 날씨 정보요청 2. 네이버가 날씨 정보 보내줌 3.날씨 정보를 로컬에 출력 인데
//1번 요청 후 3번을 할 수 없기에 await같은 코드를 써야 함