Intro

JS -> 싱글 스레드

: 하나의 일 밖에 못하는 구조

=> 기본적으로 동기처리

그림 처럼 데이터 요청 시간이 오래 걸린다면 다른 일들은?

그림과 같이 다른 요청 수행도 병렬적으로 하기위해 비동기 요청으로 수행해야 한다

그렇다면 비동기 요청이 여러 개가 있을 때는?

위의 코드 구조라면 response1을 가지기 전에 response2에 대한 요청이 이루어진다

Callback, Promise, Async/Await 3가지 방법으로 해결

---

콜백 함수

: 특정 함수에 매개변수로 전달된 함수를 의미

: 함수를 전달받은 함수 내에 호출

firstFunction의 매개변수로 secondFunction함수가 호출되는 것을 확인 -> 콜백 함수

단점

• 소스 코드에 대한 떨어지는 가독성
• 에러 처리 시 모든 콜백 함수에 각각 에러 핸들링 부여
  
  

Promise

: new 키워드와 생성자를 사용해 생성

: 생성자는 매개변수로 '실행 함수'를 받음 -> 2 가지 매개변수 선언

: 이는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결괏값 나타냄

- resolve : 비동기 작업을 성공적으로 완료해 결과를 값으로 반환 시 호출

- reject : 작업이 실패해 오류의 원인을 반환 시 호출 -> 오류 객체

3가지 상태

대기(pending) : 비동기 처리 로직이 아직 완료되지 않은 상태

이행(fulfilled) : 비동기 처리가 완료되어 프로미스가 결괏값을 반환해준 상태

거부(rejected) : 비동기 처리가 실패하거나 오류 발생한 상태

대기 중인 프로미스는 값과 함께 fulfilled 될 수도, rejected 될 수도 있다

then 메소드에 의해 대기열에 추가된 처리기들이 호출

이미 이행했거나 거부된 프로미스에 처리기를 연결해도 호출 가능

=> 비동기 연산과 처리기 연결 사이에 충돌 조건 없음

Promise.all()

: 순회 가능한 객체에 주어진 모든 프로미스가 수행 후 또는 프로미스가 주어지지 않았을 때 수행하는 프로미스 반환

: 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부

promise2 같은 경우 프로미스를 하지 않아도 all에 의해 프로미스 반환되어 수행

promise2에 rejected를 부여하는 경우 나머지도 rejected되어 수행이 안되는 것을 확인

Promise.race()

: iterable안에 있는 프로미스 중에 가장 먼저 완료된 것의 결괏값으로 그대로 이행하거나 거부

promise1과 promise2 중 setTimeout에 의해 promise1이 더 먼저 호출되는 것을 확인

race함수에 의해 더 먼저 호출되는 것을 반환하기에 one이 콘솔에 출력

Async / Await

: 각 처리에 대해서 순차적으로 이루어지게끔 기다리라는 명령 수행

비동기 코드이지만 마치 동기 코드처럼 보임

Promise에 then 메소드 통한 체인 형식 보다 가독성이 좋음

await은 async 내부 함수에서만 사용 가능

동기식 코드에서 사용하는 try...catch 구문을 async / await 구조에 사용 가능