[🍦] 손님~ 진동벨로 알려드릴게요! (3) - try, catch

비동기 1편 - promise

비동기 2편 - async & await

[🍦] 손님~ 진동벨로 알려드릴게요! (1) - promise

[🍦] 손님~ 진동벨로 알려드릴게요! (2) - async, await

---

비동기 1편애서 promise chaining(.then) 상황에서 에러를 저리하기 위해 catch를 사용했다.

fetch("https://jsonplaceholder.typicode.com/comments")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
	  // 에러처리
	  console.log(err)
  })

 

 

그렇다면, promise chaining(.then)이 없는 경우에는 에러 처리를 어떻게 해야할까?

 

try & catch

 

📍try & catch

한 번 시도해보고, 오류가 나면 감지한다.

-> 오류가 날 수도 있는 부분을 try 안에서 실행시킨다.

 

📍적용하는 방법

 

기본 틀

try {
	// 일반 코드
} catch (에러데이터) {
	// 에러 처리 코드
}

 

 

1. 일단 async, await로 변경하기

const response = await fetch("https://jsonplaceholder.typicode.com/comments");
const data = await response.json();

 

2. try로 위 코드를 감싸보기

try {
	const response = await fetch("https://jsonplaceholder.typicode.com/comments");
	const data = await response.json();
}

 

3. try 다음에 catch를 작성하기

try {
	const response = await fetch("https://jsonplaceholder.typicode.com/comments");
	const data = await response.json();
} catch (error) {
	// 에러 코드 작성
	console.log(error)
}

 

📍연습 하기

 

문제 1.

아래 코드를 try catch 로 감싸보세요.

async function getPost() {
	const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
	const data = await response.json();
	console.log(data)
}

getPost();

정답

async function getPost() {
	try {
		const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
		const data = await response.json();
		console.log(data)
	} catch (error) {
		// 에러 발생 시 실행시킬 코드 작성
	}
}

getPost();

 

 

문제 2.

아래 코드를 try catch 로 감싸보세요.

async function getPosts() {
	const response = await fetch("https://jsonplaceholder.typicode.com/posts");
	const data = await response.json();
	console.log(data)
}

getPosts();

정답

async function getPosts() {
	try {
		const response = await fetch("https://jsonplaceholder.typicode.com/posts");
		const data = await response.json();
		console.log(data)
	} catch (error) {
		// 에러 발생 시 실행시킬 코드 작성
	}
}

getPosts();