[리액트 React] 페치, 엑시오스 차이 (Fetch , Axios)

Fetch

• 브라우저 내장 API로 기본 제공된다
• 기본적인 기능은 간단하고 가벼우며, 간단한 요청에 적합하다
• 추가적인 기능(예: JSON 파싱, 오류 처리)을 위해 명시적으로 설정해야 한다

axios

• 외부 라이브러리로, 별도의 설치가 필요하다
• 좀 더 사용하기 쉬운 API를 제공하며, 요청과 응답을 자동으로 처리한다
• 기본적으로 JSON 파싱 및 오류 처리가 내장되어 있다

axios 설치 명령어

npm	yarn
npm install axios	yarn add axios

---

fetch와 axios 코드 비교

 

데이터 읽어오기

 

fetch

• 첫 번째 .then()에서 JSON 형식의 응답 데이터를 JavaScript 객체로 파싱 하고, 두 번째 .then()에서 데이터를 출력해 준다.
• response.json()을 한번 더 해주는 과정이 필요하기 때문에 fetch로 데이터를 요청하는 경우 두 개의 .then()이 필요하다

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

fetch(url)
.then((response) => response.json())
.then(console.log);

 

axios

• 응답(response)을 기본적으로 JSON 포맷으로 제공하기 때문에 response.data로 응답 데이터를 사용할 수 있다

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

axios.get(url).then((response) => console.log(response.data));

---

에러 처리

 

fetch

• 네트워크 장애 외에는 .catch()가 호출되지 않기 때문에 .then() 안에 모든 케이스에 대한 HTTP 에러 처리를 해야 한다
• 응답이 성공적이지 않은 경우 에러를 예외처리(throw)하여 콘솔에 에러 메시지를 확인할 수 있다

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

• 요청이 반환하는 Promise 객체의 상태코드가 오류인 경우 거부(reject)하며 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);
	  }
	});

---

Promise

비동기 처리에 사용되는 객체로 비동기 작업의 완료 또는 실패와 같은 결과를 나타낸다. 주로 네트워크 요청, 파일 읽기, 데이터베이스 조회 등과 같은 비동기 작업을 다룰 때 사용되며 세 가지 상태를 가질 수 있다

 

• Pending(대기) : 비동기 작업을 요청 후 응답을 받기 전까지의 상태
• Fulfilled(이행)  : 비동기 작업이 성공적으로 완료됨
• Rejected(거부) : 비동기 작업 실패

예시코드

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const isSuccess = true;

  if (isSuccess) {
    resolve("Success!"); // 작업이 성공적으로 완료될 때 호출
  } else {
    reject("Error!"); // 작업이 실패했을 때 호출
  }
});

• Promise 객체를 사용하여 비동기 작업을 수행할 때, .then() 및 .catch() 메서드를 사용하여 성공과 실패를 처리할 수 있다.
• .then() 메서드는 비동기 작업이 성공할 경우 호출되고, .catch() 메서드는 작업이 실패한 경우 호출된다