[자바스크립트 ES6] 03

✅ 2.5 비동기 자바스크립트

• 동기적인 자바스크립트를 작성하면 일련의 명령이 순서대로 실행되며,
  각 연산이 일어나는 동안 다른 어떤 일도 벌어질 수 없음.
• 현대적인 웹에서는 비동기 작업을 수행할 필요가 있음.
  백그라운드에서 일을 수행하는 동안 자바스크립트는 자유롭게 다른 일을 수행할 수 있음.

📍 2.5.1 단순한 프라미스(promise)와 fetch

• 프라미스는 자바스크립트에서 비동기적인 동작을 잘 처리하게 해줌.
• 대기 중인 프라미스는 데이터가 도착하기 전의 상태를 표현함.
• .then()이라는 함수를 대기 중인 프라미스에 연쇄 호출하면서
  콜백 함수를 인수로 받으며 바로 앞에 있는 연산이 성공하면 콜백이 호출됨
• fetch()는 데이터를 받아오고, then()은 데이터가 도착하면 그 데이터를 가지고 다른 일을 수행함.
  
• then은 프라미스가 정상적으로 완료되면 콜백 함수를 한 번만 호출,
  콜백 함수가 반환하는 값은 then 함수의 콜백에 전달되는 인자가 됨.
  
• 성공적인 처리된 프라미스를 처리하기 위해 then 함수를 연쇄적으로 호출

📍 2.5.2 async/await

• then과 다르게 비동기 프라미스를 처리하는 방법 중 하나인 async 함수를 이용
• then 함수를 연쇄 호출해 프라미스의 결과를 기다리는 대신 async 함수를 이용해 프라미스 다음에 있는 코드를 실행하기 전에 프라미스가 끝날 때까지 기다리라고 명령
  할 수 있음
  
• async 키워드는 함수를 비동기 함수로 만들어 줌
  • 비동기 함수에서는 코드를 더 진행하기 전에 프라미스가 완료될 때끼지 기다릴 수 있다는 특징이 있음.
• 프라미스 호출 앞에 await 키워드를 붙이면 프라미스가 완료될 떄까지 기다렸다가 함수가 진행됨
• await와 async를 사용할 때에는 프라미스 호출 주변을 try..catch 블록으로 둘러싸서 정상적으로 완료되지 않은 프라미스에서 발생한 오류를 처리할 필요가 있음

📍 2.5.3 프라미스 만들기

• 프라미스를 사용하면 간단하게 비동기 작업의 성공이나 실패를 돌려줄 수 있음
• 프라미스는 API에 요청을 보내며 이 요청이 성공하면 데이터를 읽어옴. 만약 이 요청이 성공하지 않으면 오류를 발생시킴.
• 프라미스를 사용하면 비동기 요청을 쉽게 처리할 수 있음.