Axios 란?

👉 node.js와 브라우저를 위한 Proisme 기반 http 클라이언트
즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지
📌 API 서버는 우리가 만든 json-server를 사용한다.
한 프로젝트 내에서 4000 번 포트로 서버를 가동시켜 사용한다.

설치

yarn add axios

GET

get은 서버의 데이터를 조회할 때 사용한다.

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다.

axios.get(url[, config]) // GET

axios는 get 요청을 할 수 있도록 도와주는 패키지일 뿐이지, 어떻게 요청해야하지? 와 같은 방법은 우리가 사용할 API 명세서를 확인해야 한다.

[json-server 공식문서]
전체 정보, 상세 정보는 path variable 로 url을 작성한다.

filter와 같은 기능을 위해서 GET 요청을 할 때는 query로 보낸다.

예시

json-server에 있는 todos를 axios를 이용해서 fetching 하고 useState를 통해 관리하는 로직

// src/App.js

import React, { useEffect, useState } from "react";
import axios from "axios"; // axios import 합니다.

const App = () => {
  const [todos, setTodos] = useState(null);

	// axios를 통해서 get 요청을 하는 함수를 생성합니다.
	// 비동기처리를 해야하므로 async/await 구문을 통해서 처리합니다.
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:3001/todos");
    setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set 합니다.
  };
	
	// 생성한 함수를 컴포넌트가 mount 됐을 떄 실행하기 위해 useEffect를 사용합니다.
  useEffect(() => {
		// effect 구문에 생성한 함수를 넣어 실행합니다.
    fetchTodos();
  }, []);

	// data fetching이 정상적으로 되었는지 콘솔을 통해 확인합니다.
  console.log(todos); // App.js:16
  return <div>App</div>;
};

export default App;

POST

post는 보통 서버에 데이터를 추가할 때 사용한다.
보통은 클라이언트의 데이터를 body 형태로 서버에 보내고자 할 때 사용한다.

axios.post(url[, data[, config]])   // POST

예시

const onSubmitHandler = async(todo) => {
    await axios.post("http://localhost:3001/todos", todo); 
	fetchTodos();
  };

DELETE

delete는 저장되어 있는 데이터를 삭제하고자 요청할 때 사용한다.

axios.delete(url[, config])  // DELETE

예시

  const onClickDeleteButtonHandler = (todoId) => {
    axios.delete(`http://localhost:3001/todos/${todoId}`);
    setTodos(todos.filter((item) => item.id !== id));
  };

PATCH

patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다.

axios.patch(url[, data[, config]])  // PATCH

예시

 const onUpdateButtonClickHandler = async () => {
    await api.patch(`http://localhost:3001/todos/${targetId}`, {
      title: content,
    });
    setTodos(
      todos.map((item) => {
        if (item.id == targetId) return { ...item, title: content };
        else return item;
      })
    );
  };

fetch

fetch는 ES6 부터 도입된 Javasciprt 내장 라이브러리 이다. (Promise 기반 비동기 통신 라이브러리)
내장 라이브러리 이기 때문에 별도의 설치 및 import 가 필요 없다.
그러나 우리는 fetch 가 가진 단점들 때문에 axios를 주로 사용한다.

[fetch의 단점]
1. 미지원 브라우저 존재
2. 개발자에게 불친절한 response
3. axios에 비해 부족한 기능

CASE 1. 데이터 읽기

fetch

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

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

fetch().then 을 한 상태여도 여전히 JSON 형식이 아니기 때문에 response.json()을 한번 더 해주는 과정이 필요하다.
그러므로 fetch로 데이터를 요청하는 경우 두 개의 then 이 필요하다.

axios

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

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

axios는 친절하게도 응답(response)를 기본적으로 JSON 포맷으로 제공한다.
우리는 단순히 response.data로만 사용하면 된다.

CASE 2. 에러 처리

fetch

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

fetch는 catch가 살행하는 경우는 오직 네트워크 장애 케이스이다.
따라서 개발자가 일일이 then() 안에 모든 케이스에 대한 HTTP 에러 처리를 해야 한다.

axios

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

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

axios.get() 요청이 반환하는 Promise 객체가 가지고 있는 상태코드가 2XX 를 넘어가면 거부 (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);
	  }
	});