프로미스
- 프로미스 객체에는 세가지 메서드와 상태 프로퍼티가 존재.
- then, catch, finally라는 메서드가 존재, 안에 콜백을 등록할 수 있는 메소드이다.
- 그리고 State라는 프로퍼티가 존재한다.
- Result는 일단 무시
State
- 3가지의 값으로 세팅될 수 있다.
- pending, fulfilled, rejected.로 설정될 수 있다.
- 세가지는 상태이다.
pending에서fulfilled와rejected로 넘어갈 수 있다.- 마지막 두가지는
Settled라고 한다. 정착상태.
fetch("url"), 프로미스 객체를 반환해주는 비동기 API
- fetch는 url을 통해 http request를 보내서 response를 받는 API.
- fetch는 즉각적으로 프로미스를 리턴해준다. 거기
state값은pending상태.
- 그렇기 때문에 비동기 동작을 하게 되고 inu라는 출력값이 먼저 출력이 되게 될 것이다.
fetch가 반환하는 state.
- fetch는 즉각적으로
pending상태를 반환하지만, 일을 성공적으로 마치느냐, 그렇지 못하냐에 따라서fulfilled와rejected둘중 하나의state를 가지게 된다.
따라서 이 상태에 따라서 우리는 프로미스의 메소드인 then, catch, finally 메서드에 콜백 함수를 등록해 사용한다.
- 처음 프로미스의 메소드는
콜백 함수를 등록할 수 있는 메서드라고 했었다.- 즉 성공적으로 fulfilled가 되면 then 메서드의 호출,
- 실패해서 rejected가 되면 catch 메서드의 호출이 일어난다.
example
- 이 코드의 경우, getJSON을 통해 데이터를 가져오는데, 여기서 pending -> fulfilled가 된다면 then 메소드에 있는 콜백함수를 호출하게 되고, jsonData를 출력하게 될 것이다.
- 여기서는 rejected 되었을때 catch를 통해 error를 가져와서 출력해주는 콜백함수가 추가 되었다.
- then 메서드 두번째 인자로 오류를 넣어줘도 되지만, 그렇게는 보통 사용하지 않는다.
p1과 p2, p3의 state
p1은 fetch를 통해, responce를 받게 되면 fulfilled가 된다.p2는 p1의 then이라는 메소드를 통해 c1을 실행시키는데, 이 c1은 리턴값이 Promise다.- 이 경우에는 P2의 state는 리턴값으로 정한 Promise가 어떤 settle값을 가지느냐에 따라서 정해진다.
- 만약 fulfilled가 되면 p2의 state도 fulfilled.
- 만약 rejected 되면 p2의 state도 Rejected.
p3의 경우 c2가 리턴값이 없기 때문에 자신의 프로미스가 반환되면 바로 fulfilled가 된다.
finally
- 이건 then, catch와 상관없이 무조껀 실행된다.
프로미스를 만드는 방법
- 이미 존재하는 빌트인 API를 반환해 사용한다
- 프로미스 객체를 만드는 생성자를 이용해서 반환해 사용한다
1. 빌트인 promise-based API를 사용해 비동기 API를 만들기
- fetch의 then 메소드는 프로미스를 반환한다. 따라서 프로미스를 반환하게 되면 비동기 함수가 된다.
- 그리고 이렇게 만든 비동기 함수를 또 리턴하는 함수를 만들면 그 함수도 비동기 함수가 된다
2. Promise() constructor 이용해서 Promise 객체 만들기
- 프로미스를 호출할땐 항상 화살표 함수를 하나 넣어야한다.
- 그리고 두개의 인자값을 받아야한다. 첫번째 파라미터는 성공 콜백, 두번째 파라미터는 실패 콜백이라는 순서를 지켜야한다.
-- 우리가 만든 비동기 함수는 duration의 값에따라서 reject와 resolve 둘중 하나를 실행시킬 것이고, resolve냐, reject에 따라서 then과 catch로 연결되어 fulfilled, rejected 상태로 정해지게 될 것이다.
await
- Promise를 반환하는 함수와 함께 사용한다.
- await Promise는 Promise가 settle 될 때까지 대기한다.
- 따라서 이 두개의 라인은 순차적으로 실행될 것이다. 실행순서를 보장할 수 있다.
async
- async를 사용하는 경우에 그 함수 안 비동기 함수는 await를 무조껀 가지고 있어야한다.
- fetch가 먼저 실행하고, response.json()이 실행되게끔 순서를 보장한다.
- 1번과 2번은 같은 코드이다. async는 프로미스 객체를 반환하기 때문에 호출할때도 await을 사용해주어야한다.
- 아니면 이전과 같이 then과 catch를 사용해서 코드를 구성하는 것도 똑같은 작동을 보장한다.
Promise.all
- 객체를 가져오고 싶을때 await으로 두줄로 작성하면 비동기함수이기 때문에 첫번째 줄이 작동하고 마쳐야 두번째줄이 실행된다.
- 이렇게 따로따로 실행하는게 아닌 동시에 두 라인을 실행시킬 수 있는것이 바로
Promise.all이다.
- 이렇게 두줄로 가져오지않고, 한번에 객체를 가져올 수 있다.
