Fetch

• Promise 기반 비동기 통신 라이브러리
• 별도 설치 필요하지 않다.
• 단점
  • 미지원 브라우저 존재
  • 개발자에게 불친절한 response (jon으로 변환 과정 필요)
  • axios에 비해 부족한 기능
• 사용 예시
  • 두 개의 then 필요

const url = "http://jsonplaceholder.typicode.com/todos";
fetch(url)
.then(response => response.json())
.then(console.log());

• 개발자가 일일히 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);
  });

axios

const url = "http://jsonplaceholder.typicode.com/todos";
axios.get(url).then(response => console.log(response.data))

• 에러메세지 확인

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

axios
  .get(url)
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

• 사용 예시

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);
	  }
	});