[TIL] fetch then() / async await / try...catch

oaksusu·2024년 3월 15일

TIL

목록 보기

11/36

1. 제대로 알고 넘어가기 :

1-1. fetch then

: fetch 함수, then 메서드

(1) fetch 함수

:API 호출, 네트워크 요청을 처리하고 Promise를 반환함

(2) then 메서드

: then 메서드로 작업이 완료될때까지 대기하고 처리할 수 있음

fetch 함수는 비동기적으로 처리하지만, then 메서드를 연쇄적으로 사용하면
비동기 작업의 결과를 연속적으로 처리하기 때문에 
마치 동기적으로 처리되는것처럼 보이긴 함

then은 Promise 객체의 메서드임! (fetch().then()으로 자주 쓰여서 fetch함수와 연관된건 줄 알았음...)

1-2. async await

: async await 키워드

(1) async

: 함수를 비동기 함수로 만들기 위해 사용
(function 앞에 써야함)

(2) await 키워드

: async 함수 내부에서만 사용 가능한 키워드
Promise가 완료될때까지 함수 실행을 일시 중지시킴
이러한 특성으로 인해 비동기 코드를 동기적으로 작성할수가 있는것

1-3. try...catch문

: 예외처리 구문임
try{}의 블록안의 코드가 실행되다가 예외가 발생하면
catch{}의 블록으로 넘어감

fetch를 사용할때,
네트워크 요청중에 발생하는 오류를 처리하기 위해서 try...catch문을 쓸 수 있음

2. 정리★★★

비동기 처리 함수 : fetch
함수를 비동기 함수로 만들어주는 키워드 : async
예외 처리 : try...catch
then 메서드는 Prmoise 객체의 "메서드" , await은 async 함수내에서 사용하는 "키워드"

3. 예시코드

async function fetchDataExample() {
	try{
    	const response = await fetch('URL');
        
        if (!response.ok) throw new Error('에러 발생');
        
        const data = response.json();
    } catch(error) {
    	console.error('에러가 납니다.', error);
    }
}