[TIL] 19.08.16 Promise

오늘 한일

Promise의 사용법에 대해 공부했다. 간단한 코드들을 작성하며 연습해 보았지만 아직 확실하게 이해가 가진 않는다.

 

오늘 메모

 

const PORT = process.env.NODE_ENV === "production" ? 3001 : 3002; 

포트를 분기하기위해서 삼항연산자로 분리 해놓았다,

개발을 하기 때문에 굳이 프로덕션을 분리해놓지 않았다 ?

 

자바스크립트에서 비동기로 이루어 지는것들

• setTimeout, setInterval
• fetch , ajax 
• setState

(fetch는 서버에 요청을하는 함수 우리가 원하는 리소스를 받아온다.)

 

 

비동기 처리 

비동기적으로 일어나는 일들을 동기적으로 작동시키는 일이다. 

 

비동기에서는 기다리는 일들이 일어난다. ex) fetch 는 주소룰 가져오는일 … 

몇 초 뒤에 실행되는 것은 알지만 언제 실행되는지는 알수가 없다. 

 

서버 예시 서버에서 데이터를 가지고 온 뒤에 콘솔이 찍히도록 하게 만드는게 비동기 처리이다. 

 

Callback, promise, async/await이 기다리게 만드는 방법이다. 

 

callback은 중첩이 많다 그래서 나온게 promise이고 여기서 더 쉽게 읽기 쉽게 나온것이 async/await 이다.

 

Call stack 에 비동기 로직들이 쌓이고 실행이 되면서 브라우저 위에 있는 비동기 함수들이 자기들의 할일이 있는 곳으로 가서 몇초를 기다린다. 이벤트루프가 기다림이 끝나는 순서대로 이벤트 큐로 넘겨준다 . 그리고 스택이 비워지면 이벤트 큐에 있던 값들이 순서대로 실행이 된다. (이벤트 큐에 먼저들어가는 순서대로 실행이 된다.)

 

Promise는 성공과 실패의 상태를 가지는 객체  성공은 resolve를 호출 실패는 reject를 호출 

 

promise의 장점 

• 분기
• 가독성
• return 처럼 코드를 쓸 수 있다.
• 오류발생 줄여준다.
• 에러 처리가 용이하다.
• 수정이 쉽다.
• 성공했을때와 실패 했을때 일어나는 함수들을 우리가 직접 넘겨줄 수 있다.

 

Promise 3가지 속성 

Pending => 서버에서 데이터를 가지고 온 상태 

fuflilled(Resolve, Reject)

 

프로미스 객체 (가지러 갔을 경우 어떻게 가져올것인가 )

.then(가지고온 데이터를 어떻게 처리 ?)

.catch(에러가 뜨는경우)

 

Promise 객체하나당 하나의 then만 열결할 수 있다. 

then은 resolve 함수가 실핸된 시점 다시 promise를 부른다.

바로 앞의 resolve를 then 이 받는다.