[TIL]201222

1. 코드스테이츠

---

비동기 작업 (Sprint async and Promise)

• part1 : 타이머 API
  - 시간의 흐름(timeline)에 따른 애니메이션 따위의 작업을 할때
  
  
• part2 : fs module
  - 파일 I/O(input/output)
  
  
• part3 : fetch API
  - 네트워크 요청(fetch)
  
  
  

비동기 API

• setTimeout / setInterval / requestAnimationFrame

• (node.js)fs.readFile / fs.writeFile

• (browser API) fetch : http 프로토콜에 관련됨 / (node.js) http 모듈
  - 웬만하면 모든 통신은 비동기이다.
  
  
  

blocking & non-blocking

다른 언어 / 플랫폼에서는 blocking, 동기, non-blocking, 비동기 같은 경우 다르지만 node.js / 자바스크립트는 blocking = 동기, non-block = 비동기

• blocking : 마냥 대기해야되는 상태
  • 예시 : like photoshop 경고화면창(?) / Alert(뒤에있는 웹앱이 확인을 누르기 전까지 멈춘다)
• non-blocking : 오래걸리는 작업은 non-block작업으로 해야한다.
  • 예시 : processing bar(화면상에서)

중첩된 callback이 발생하는 사례

1. 파일 입출력
2. 타임라인 애니메이션
3. 네트워크 요청

Promise

비동기 함수가 존재할때 Promise를 이용하여 함수 실행 순서를 자유자재로 프로그래밍할 수 있다.

.then()과 Promise.all() 실행 순서가 다르다

• Promise.all()은 순서를 보장하지 않는다
• Promise.all() 이후에 오는 .then은, Promise.all()의 모든 상태가 fulfilled되야 .then이 실행된다.
  - Promise.allSettled()는 모든 요청이 끝나면 결과를 내준다.(fulfilled이건 reject이건간에)

Promise.allSettled()

Async & await

• async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.

• 함수선언전 async 키워드를 쓴다면, await을 async함수내에 쓸수 있다.

• promise의 syntactic sugar

• 좀더 가독성 있게 코드를 이어나갈 수 있다.

에러처리

• promise는 .catch

• async는 try ...catch