[JavaScript] Axios 정리 (Feat. fetch)

`Axios`란?

`Axios`는 JavaScript에서 HTTP 요청을 처리하기 위한 라이브러리입니다. `Axios`를 통해 웹에서 `API`와 상호작용할 수 있고, `GET`, `POST`, `PUT`, `DELETE` 등 다양한 HTTP 메소드를 쉽게 사용할 수 있습니다. `Axios`는 Promise 기반으로 작동하여 비동기 요청을 관리하고, 요청과 응답의 인터셉터, 자동 JSON 변환, 타임아웃 설정 등의 기능을 제공합니다.

---

GET 리퀘스트

`GET` 요청은 서버에서 특정 데이터를 조회하기 위해 사용됩니다. 클라이언트가 서버에 요청을 보내고, 서버는 해당 요청에 대한 응답으로 데이터를 반환합니다.

// axios
async function getAxios(id) {
    const res = await axios.get(`https://hwiiron.com/api/${id}`);
    return res.data; // 서버로부터 받은 응답 데이터 반환
}

 

위 코드에서 `axios.get()` 메소드를 사용하여 특정 id에 대한 데이터를 요청합니다. 요청에 성공하면 `res.data`를 통해 서버에서 반환된 데이터에 접근할 수 있습니다.

// fetch
async function getFetch() {
    const res = await fetch(`https://hwiiron.com/api/${id}`);
    const data = res.json(); // 응답을 JSON 형태로 변환
    return data; // 변환된 데이터 반환
}

 

`Fetch API`를 사용할 경우, 응답을 `res.json()`으로 변환하여 JSON 형태의 데이터를 반환합니다.

 

쿼리 파라미터 보내기

쿼리 파라미터는 URL에 추가 정보를 전달할 때 사용되며, `Axios`에서는 `params` 옵션을 통해 쉽게 설정할 수 있습니다.

// axios
export async function getAxios(params = {}) {
    const res = await axios.get('https://hwiiron.com/api', {
    	params, // 쿼리 파라미터 설정
    });
    return res.data; // 서버로부터 받은 응답 데이터 반환
}

 

위 코드에서 `params` 객체는 URL에 쿼리 파라미터를 추가하는 역할을 합니다. 예를 들어, `{ page: 1, limit: 10 }`와 같은 파라미터를 전달하면 URL은 `https://hwiiron.com/api?page=1&limit=10`으로 변환됩니다.

// fetch
async function getAxios(params = {}) {
  const url = new URL('https://hwiiron.com/api');
  Object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key]) // URL에 쿼리 파라미터 추가
  );
  const res = await fetch(url);
  const data = await res.json(); // 응답을 JSON 형태로 변환
  return data; // 변환된 데이터 반환
}

 

`Fetch API`에서는 URL 객체를 사용하여 쿼리 파라미터를 추가합니다. `Object.keys(params).forEach()`를 통해 각 파라미터를 URL에 동적으로 추가할 수 있습니다.

---

POST 리퀘스트

POST 요청은 클라이언트가 서버에 데이터를 전송하여 새로운 리소스를 생성하는 데 사용됩니다 요청의 본문(body)에 데이터를 담아 전송하며, 서버는 이를 처리하여 응답을 반환합니다.

// axios
async function createAxios() {
	const res = await axios.post('https://hwiiron.com/api/age-surveys', surcveyData);
    return res.data; // 서버로부터 받은 응답 데이터 반환
}

 

위 코드에서 `axios.post()` 메소드를 사용하여 `surveyData`를 서버로 전송합니다. `Axios`는 자바스크립트 객체를 자동으로 JSON 문자열로 변환하여 전송하므로, 데이터 형식에 대한 문제 없이 객체를 그대로 전달할 수 있습니다.

// fetch
async function createFetch(surveyData) {
  const res = await fetch('https://hwiiron.com/api/color-surveys', {
    method: 'POST', // POST 메소드 지정
    body: JSON.stringify(surveyData), // 데이터를 문자열로 변환하여 전송
    headers: {
      'Content-Type': 'application/json', // 전송할 데이터의 타입 지정
    },
  });

  if (!res.ok) {
    throw new Error('데이터를 생성하는데 실패했습니다.'); // 오류 처리
  }

  const data = await res.json(); // 응답을 JSON 형태로 변환
  return data; // 변환된 데이터 반환
}

 

`Fetch API`를 사용할 경우, `body` 속성에 데이터를 문자열로 변환하여 전달해야 하며, `Content-Type` 헤더를 통해 전송하는 데이터의 타입을 명시해야 합니다.

 

요청의 바디 데이터

`POST`, `PATCH`, `PUT` 요청은 서버로 전송할 데이터가 필요합니다. 이러한 요청들은 바디 데이터를 두 번째 아규먼트로 받고, 요청의 옵션은 세 번째 아규먼트로 전달됩니다. 반면, `GET`, `DELETE` 요청은 바디가 필요하지 않으며, 옵션을 두 번째 아규먼트로 받습니다.

---

`Axios` 인스턴스

`Axios` 인스턴스는 여러 요청에서 공통적으로 사용되는 설정을 미리 정의하여 재사용할 수 있는 객체입니다. 이를 통해 코드의 중복을 줄이고, 일관된 방식으로 `API` 요청을 관리할 수 있습니다. 인스턴스를 생성할 때 설정할 수 있는 옵션은 요청을 보낼 때 설정할 수 있는 옵션과 동일합니다.

// 인스턴스 생성 예시
const instance = axios.create({
  baseURL: 'https://hwiiron.com/api', // 기본 URL 설정
  timeout: 3000, // 요청 타임아웃 설정 (밀리초 단위)
});

 

위 코드에서 `axios.create()` 메소드를 사용하여 새로운 `Axios` 인스턴스를 생성합니다. `baseURL`은 요청할 API의 기본 URL을 설정하며, `timeout`은 요청이 특정 시간 내에 완료되지 않으면 자동으로 취소합니다.

// 인스턴스를 사용한 GET 요청 예시
async function getAxios(params = {}) {
  const res = await instance.get(`/color-surveys`, {
    params, // 쿼리 파라미터 설정
  });
  return res.data; // 서버로부터 받은 응답 데이터 반환
}

 

인스턴스를 사용하여 `GET` 요청을 보낼 때는, 기본 URL에 `/color-surveys` 경로를 추가하여 요청을 보냅니다. `params` 옵션을 통해 쿼리 파라미터를 추가할 수 있습니다. `Axios` 인스턴스를 사용하면, 모든 요청에서 기본 URL과 기타 설정을 일관되게 유지할 수 있습니다.

---

`Axios` 오류 처리

`Axios`는 두 가지 주요 경우에 Promise를 reject합니다. 첫 번째는 리퀘스트 자체가 실패한 경우(네트워크 오류, 잘못된 URL 등), 두 번째는 리스폰스가 돌아왔지만 상태코드가 실패를 나타내는 경우(4XX, 5XX에러)입니다. 이러한 경우 `Axios`는 오류를 `catch`문으로 전달하며, 상태 코드가 실패한 경우에는 리스폰스 객체를 통해 오류에 대한 세부 정보를 확인할 수 있습니다.

// Axios 요청 예시
export async function createAxios(surveyData) {
  const res = await axios.post('https://hwiiron.com/api/color-surveys', surveyData);
  return res.data;
}

 

위 코드의 함수는 `Axios`를 사용하여 데이터를 서버로 전송하고, 응답 데이터를 반환합니다. `createAxios` 함수를 사용하여 요청을 보낼 때, 오류가 발생하면 `try...catch`문으로 처리할 수 있습니다.

// 오류 처리 예시
import { createAxios } from './api.js';

const surveyData = {
  age: 27,
};

try {
  const newAxios = await createAxios(surveyData);
  console.log(newAxios);
} catch (e) {
  if (e.response) { 
    // 리퀘스트는 성공했지만, 상태 코드가 4XX 또는 5XX일 경우
    console.log(e.response.status); // 상태 코드 출력
    console.log(e.response.data); // 서버에서 반환된 오류 메시지 출력
  } else { 
    // 리퀘스트 자체가 실패했을 경우 (네트워크 오류 등)
    console.log('리퀘스트가 실패했습니다.');
  }
}

• `e.response`가 있는 경우 : 리퀘스트는 서버에 도달했지만, 서버가 오류 상태 코드(4XX, 5XX)를 반환한 경우입니다. 이때 `e.response.status`와 `e.response.data`를 통해 서버의 응답 상태 코드와 메시지를 확인할 수 있습니다.
• `e.response`가 없는 경우 : 리퀘스트 자체가 실패한 경우(네트워크 문제, 잘못된 URL)입니다. 이 경우 리퀘스트가 서버에 도달하지 못했기 때문에 오류 메시지를 출력하여 처리합니다.