[JS] 📡 fetch API, Axios 사용법

비동기 요청의 대표적인 사례에는 네트워크 요청이 있다.
그중에서 URL로 요청하는 경우가 가장 흔한데,
URL로 요청하는 것을 가능하게 해주는 API가 바로 fetch API이다.

❗️참고) fetch는 Promise의 객체 타입을 반환합니다.

✔️ fetch API

📡 기본적인 구조

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((json) => console.log(json));
  .catch((error) => console.error(error));

📡 옵션 제공 구조

선택적으로 두 번째 매개변수를 제공한다. (필수가 아님)

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // 또는 'PUT', 'GET'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((json) => {
  console.log('성공:', json);
})
.catch((error) => {
  console.error('실패:', error);
});

📡 간단한 GET 요청 예시

GET : 정보를 요청하기 위해 사용되는 메서드

// Promise ver
fetch('https://koreanjson.com/users/1', { method: 'GET' })
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// Async / Await ver
async function request() {
  const response = await fetch('https://koreanjson.com/users/1', {
    method: 'GET',
  });
  const data = await response.json();
  console.log(data);
}

📡 POST 요청 예시

POST : 서버에게 데이터를 보내기 위해 사용되는 메서드

// Promise ver
fetch('https://koreanjson.com/users', {
  method: 'POST',
  headers: {
    // JSON의 형식으로 데이터를 보내준다고 서버에게 알려주는 역할입니다.
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ nickName: 'ApeachIcetea', age: 20 }),
})
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// Async / Await ver
async function request() {
  const response = await fetch('https://koreanjson.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ nickName: 'ApeachIcetea', age: 20 }),
  });
  const data = await response.json();
  console.log(data);
}

request();

---

✔️ Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어있다.
그래서 실제로는 Fetch보다 Axios를 주로 사용한다.

❗️참고) HTTP란 'HyperText Transfer Protocol'의 약자로 하이퍼 텍스트를 교환, 전송을 위한 통신 규약입니다.

📡 Axios 설치

npm install axios

//❗️참고) 글로벌 설치X, 사용하고 싶은 폴더에 개별로 설치하면 된다.

📡 기본적인 구조

axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

📡 옵션 제공 구조

선택적으로 두 번째 매개변수를 제공한다. (필수가 아님)

const data = { username: 'example' };

axios
  .post('https://example.com/profile', data) // 또는 get, put
  .then((response) => {
    const { data } = response;
    console.log('성공:', data);
  })
  .catch((error) => {
    console.error('실패:', error);
  });

📡 간단한 GET 요청 예시

GET : 정보를 요청하기 위해 사용되는 메서드

axios.get("url"[,config])

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Promise ver
axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

// Async / Await ver
async function request() {
  const response = await axios.get('https://koreanjson.com/users/1');
  const { data } = response;
  console.log(data);
}

request();

📡 POST 요청 예시

POST : 서버에게 데이터를 보내기 위해 사용되는 메서드

axios.post("url"[, data[, config]])

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Promise ver
axios
  .post('https://koreanjson.com/users', { nickName: 'ApeachIcetea', age: '20' })
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

// Async / Await ver
async function request() {
  const response = await axios.post('https://koreanjson.com/users', {
    name: 'ApeachIcetea',
    age: '20',
  });
  const { data } = response;
  console.log(data);
}

request();

---

🔥 fetch API vs axios

Fetch API
빌트인 API라 별도의 설치가 필요없다.
.json() 메서드를 사용해야 한다.

Axios
써드파티 라이브러리로 설치가 필요하다.
자동으로 JSON데이터 형식으로 변환된다.

---

🔥 POST vs PATCH vs PUT vs GET vs DELETE

메소드	역할	멱등성
POST	Create	NO
PATCH	수정 (요청한 부분만 반영되며 나머지는 기존의 데이터가 유지)	NO
PUT	Update (변경되지 않는 데이터도 모두 전달해야 함)	YES
GET	Read	YES
DELETE	Delete	YES

❗️참고) 멱등성이란 여러번 수행해도 결과가 같음을 의미한다.

✚ 헷갈리는 PATCH와 PUT의 멱등성
PUT은 데이터를 완전히 교체해 버리기 때문에 멱등이고,
PATCH는 멱등일수도, 멱등이 아닐수도 있다.

(예를 들어 PATCH로 단순히 유저의 이름을 바꾸는 것은 멱등하지만,
호출할 때마다 +1이 된다면 멱등하지 않은 것이 된다.)