[JavaScript] 프로미스(Promise) - fetch, await, async, 오류에 try catch문 활용, then, Promise.all()

[ fetch ]

- fetch() : 프로미스 객체를 리턴해줌

=> (비동기 작업 완료 시) Promise가 결과값을 알려줌 → 이걸 하기 위해 await 문법 필요 → await fetch()의 필요성

const response = fetch('[API 주소]');
console.log(response);

=> 위의 코드 실행 시, 바로 현재 상태가 출력됨

콘솔창 : Promise { <pending> }

 

리퀘스트를 보내고 리스폰스를 파싱해서 결과를 출력하는 코드 2가지

 

 

---

 

[ await ]

- await 문법 : 비동기 작업이 완료되면 알려주는 promise의 결과값을 받아오는 방법

=> await 사용 시, promise가 fulfilled 상태가 될 때까지 기다렸다가 결과값을 돌려줌

 

=> fetch() 앞에 await을 붙여줌

const response = await fetch('[API 주소]');
console.log(response);

 

 

- 동작 과정 (ES6 모듈 내에서만 가능)

1. fetch()가 프로미스 객체를 리턴 (이때 Promise의 상태 : ① Pending : 비동기작업결과 대기 / ② Fulfilled : 비동기 성공 / ③ Rejected : 비동기 실패 => 처음 프로미스의 상태 : Pending)
2. fetch() 앞에 await : 프로미스가 Fulfilled 또는 Rejected가 될때까지 기다림
3. 만약 비동기 작업 성공 시, 결과는 fulfilled로 변경되고 fetch는 response를 프로미스의 결과값으로 갖게됨 (HTTP 응답 메타데이터(상태코드, 헤더 등)와 응답 바디를 읽을 수 있는 Response 객체를 결과값으로 받음)
4. await은 promise의 결과값을 꺼내 리턴해줌
5. fetch가 만들어 내보낸 객체인 response가 아래 코드의 response 변수에 할당해줌
6. response.json도 프로미스 리턴
7. (처음에는 Pending 상태) await 때문에 파싱 작업 끝날 때까지 기다림
8. 파싱작업이 끝나면 promise는 Fulfilled 상태가 되고 결과값으로 파싱된 데이터(성공 결과)를 얻음
9. 얻은 데이터가 변수 data에 할당

const response = await fetch('[API 주소]');
const data = await response.json();   // response.json도 promise를 반환
console.log(response);

 

이때 fetch()와 json() 앞에 모두 await을 해주는 이유

=> fetch()는 객체를 얻어오는 약속, json()은 얻어온 객체를 읽을 수 있는 형태로 파싱하는 작업이므로 각각 await이 필요

 

 

=> 위의 코드 요약 버전 : await response.json()을 실행하고 해당 결과값을 바로 출력

const response = await fetch('[API 주소]');
console.log(await response.json());

 

 

---

 

[ async ]

아래 두 코드가 있을 때 main.js를 실행하다가 asyncFunctions.js를 실행하고 여기에서 async 함수 안의 await을 만나면 fetch()의 프로미스가 fulfilled가 될 때까지 다시 main.js로 나가 이후 실행문을 실행함

* async함수는 항상 Promise를 리턴함 (함수 안에서 평범한 값 리턴 시 그 값을 결과값으로 갖는 프로미스 리턴)

* 모든 async함수를 사용할 때 항상 await과 함께 써줘야함 (예제 참고)

 

=> 기본 async 함수 구조

const async function printEmployees() {
	const response = await fetch('[API 주소]');
	console.log(await response.json());
}

 

=> async 화살표 함수 구조

const printEmployees = async () => {
	const response = await fetch('[API 주소]');
	console.log(await response.json());
}

 

 

- 예제 1) async 함수와 await은 함께 사용

const employees = await printEmployees();

 

 

---

 

 

[ 오류 발생 시 try catch문 활용하기 - async, await ]

아래 코드에서 asyncFunctions.js의 fetch()에서 오류 발생 시 해당 값에서 발생한 오류가 throw되어 catch문의 error에 들어가게 된다.

 

 

---

 

[ then() 메서드 ]

=> fetch의 메서드이기 때문에 아래와 같이 fetch 뒤에 이어쓸 수 있음

(then메서드 자체도 promise를 리턴)

* 비동기 작업을 기다리는 동안 다른 코드를 실행

* 실행 구조 : then 메소드에 등록되어 있는 콜백이 성공 결괏값을 가지고 실행

 

- 실행 순서 (앞선 비동기 작업이 완료되면 등록된 콜백을 실행) : fetch()에 대한 리스폰스가 돌아오면 .then()을 실행 → response.json이 실행되면 dataPromise.then()이 실행

then 메서드 자체도 promise를 리턴할 수 있기 때문에 위의 코드처럼 작성하면 promise 상태가 pending으로 나옴

=> 따라서 dataPromise.then()의 형태로 작성 가능

 

=> 위의 코드를 아래처럼 then을 계속 연결해 간결하게 작성 가능 (프로미스 체인)

 

 

---

 

[ 오류 발생 시 try catch문 활용하기 - .then() ]

=> 두 코드는 같은 코드임

 

• then 내부 : 앞의 작업 성공 시, 실행할 콜백 등록
• catch : 프로미스 체인 어딘가에서 오류 발생 시 실행할 콜백
• finally : 결과와 상관 없이 항상 실행되어야할 부분 등록

 

---

 

 

[ Promise.all() ]

여러 프로미스를 동시에 기다릴 때 사용함

(프로미스를 사용하는 비동기 작업 여러개를 병렬적으로 처리하고 싶을 때)

=> Promise.all()도 프로미스를 반환하므로 await이나 then 사용 가능

=> try catch문을 사용해 오류처리도 가능