axios

<aside> 💡 가장 많이 사용되고 있는 Javascript HTTP 클라이언트이다.

HTTP요청을 Promise를 기반으로 처리한다.

아래와 같이 사용한다.

catch에서 error handling이 가능하다.

const url = "<https://jsonplaceholder.typicode.com/todos>";

// axios 요청 로직
axios
  .get(url)
  .then((response) => console.log(response.data))
	.catch((err) => {

		// 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다	
		if (err.response) {
			
	    const { status, config } = err.response;
	
			// 없는 페이지
	    if (status === 404) {
	      console.log(`${config.url} not found`);
	    }

			// 서버 오류
	    if (status === 500) {
	      console.log("Server error");
	    }
	
		// 요청이 이루어졌으나 서버에서 응답이 없었을 경우
	  } else if (err.request) {
	    console.log("Error", err.message);
		// 그 외 다른 에러
	  } else {
	    console.log("Error", err.message);
	  }

</aside>

fetch

<aside> 💡 ES6부터 도입된 내장 라이브러리이다.

Promise 기반 비동기 통신 라이브러리이다.

단점

• 지원하지 않는 브라우저 존재
• 개발자에게 불친절한 response
• axios에 비해 부족한 기능

fetch의 경우 catch에서 발생하는 경우는 오직 네트워크 장애 케이스이다.

개발자가 일일히 then()안에 모든 케이스에 대한 HTTP 에러 처리를 해야한다.

const url = "<https://jsonplaceholder.typicode.com/todos>";

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(
        `This is an HTTP error: The status is ${response.status}`
      );
    }
    return response.json();
  })
  .then(console.log)
  .catch((err) => {
    console.log(err.message);
  });

</aside>