close
프로필 배경
프로필 로고

Seop_E [Frontend Study]

JS · 2025. 2. 4. fullscreen 넓게보기

(8) Sending a request with JavaScript - axios 문법

반응형

▶ 다음과 같은 openAPI를 사용합니다.

더보기

실습용 서버 호스트

실습용 서버 호스트입니다.

learn.codeit.kr

설문 응답

사용자가 제출한 MBTI와 선호 색상 데이터를 저장합니다.

엔드포인트

  POST /api/color-surveys
   GET /api/color-surveys
   GET /api/color-surveys/:id
DELETE /api/color-surveys/:id
 PATCH /api/color-surveys/:id

설문 응답 객체

속성

id: integer 설문 응답 객체에 대한 고유 식별자

mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 설문 응답에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 설문을 삭제, 또는 수정할 때 사용합니다. 읽기 전용 속성이기 때문에 한 번 값이 정해지면 바꿀 수 없습니다.

createdAt: integer 객체가 생성된 시점에 대한 UNIX 타임스탬프

updatedAt: integer 객체가 수정된 시점에 대한 UNIX 타임스탬프

설문 응답 객체 예시

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "password": "0123",
  "createdAt": 1667969077,
  "updatedAt": 1667969077
}

설문 응답 생성

엔드포인트

POST /api/color-surveys

파라미터로 넘겨준 값들을 사용해서 새로운 설문 응답 객체를 생성합니다.

바디 파라미터

mbti: string 필수 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 필수 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 필수 설문에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 설문 응답을 삭제, 또는 수정할 때 사용합니다. 읽기 전용 속성이기 때문에 한 번 값이 정해지면 바꿀 수 없습니다.

리턴 내용

생성에 성공할 시, 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

POST <https://learn.codeit.kr/api/color-surveys>
Content-Type: application/json

{
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "password": "1234"
}

리스폰스 예시

상태 코드: 201

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667969077
}

여러 설문 응답 조회

엔드포인트

GET /api/color-surveys

설문 응답 객체 전체 목록을 최신 순서로 리턴합니다.

쿼리 스트링 파라미터

mbti: string 제출자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다. 쿼리 스트링 파라미터로 보내면 해당 MBTI에 대한 설문 응답들만 모아서 확인할 수 있습니다.

limit: integer 리턴받기 원하는 설문 응답 객체 수: 값을 전달하지 않으면 10개의 객체가 리턴됩니다. 10~100 사이 정수만 허용됩니다.

offset: integer 가장 앞 객체부터 건너뛰고 싶은 객체 수: 값을 전달하지 않으면 건너뛰지 않습니다.

리턴 내용

유효한 mbti, limit을 제공했을 시, 설문 응답 객체 목록이 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

count: integer 서버에 저장된 총 설문 응답 객체 수

next: string 페이지네이션에서 다음 페이지에 해당하는 주소

previous: string 페이지네이션에서 이전 페이지에 해당하는 주소

results: array of objects 리턴된 설문 응답 객체 목록

리퀘스트 예시

GET <https://learn.codeit.kr/api/color-surveys?offset=10&limit=10&mbti=ISTJ>

리스폰스 예시

상태 코드: 200

{
  "count": 42,
  "next": "<https://learn.codeit.kr/api/color-surveys/?offset=20&limit=10&mbti=ISTJ>",
  "previous": null,
  "results": [
    {
      "colorCode": "#CA6952",
      "createdAt": 1668752533000,
      "updatedAt": 1668752533000,
      "id": 42,
      "mbti": "ISTJ"
    },
    {
      "colorCode": "#CA6952",
      "createdAt": 1668752162000,
      "updatedAt": 1668752162000,
      "id": 41,
      "mbti": "ISTJ"
    },
    {
      "colorCode": "#33A560",
      "createdAt": 1668331218000,
      "updatedAt": 1668331218000,
      "id": 40,
      "mbti": "ISTJ"
    },
    ...
  ]
}

설문 응답 조회

엔드포인트

GET /api/color-surveys/:id

URL 파라미터 :id에 해당하는 설문 응답 객체를 조회합니다.

파라미터

없음

리턴 내용

유효한 고유 식별자를 제공했을 시 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

GET <https://learn.codeit.kr/api/color-surveys/14>

리스폰스 예시

상태 코드: 200

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

설문 응답 삭제

엔드포인트

DELETE /api/color-surveys/:id

URL 파라미터 :id에 해당하는 설문 응답 객체를 삭제합니다.

바디 파라미터

password: string 필수 설문 응답에 대한 비밀번호: 고유 식별자로 특정짓는 설문의 비밀번호와 일치해야 삭제할 수 있습니다.

리턴 내용

유효한 고유 식별자와 비밀번호를 제공했을 시, 삭제된 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

DELETE <https://learn.codeit.kr/api/color-surveys/14>
Content-Type: application/json

{
  "password": "0123"
}

리스폰스 예시

상태 코드: 204

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

설문 수정

엔드포인트

PATCH /api/color-surveys/:id

파라미터로 넘겨준 값들을 사용해서 URL 파라미터 :id에 해당하는 설문 응답 객체를 수정합니다. 제공되지 않은 선택 필드는 수정되지 않습니다.

바디 파라미터

mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 필수 설문 응답에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 고유 식별자로 특정짓는 설문의 비밀번호와 일치해야 수정할 수 있습니다.

리턴 내용

유효한 고유 식별자와 비밀번호를 제공했을 시, 수정된 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

PATCH <https://learn.codeit.kr/api/color-surveys/14>
Content-Type: application/json

{
  "mbti": "ISTJ",
  "colorCode": "#000000",
  "password": "0123"
}

리스폰스 예시

상태 코드: 200

{
  "id": 14,
  "mbti": "ISTJ",
  "colorCode": "#000000",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

▶ package.json 파일

더보기 
{
  "type": "module"
}

 

axios는 fetch보다 문법이 조금 더 간단하고

다양한 편의 기능을 제공하기 때문에 실무에서 정말 많이 사용한다.

 

axios 모듈 설치

우선 axios는 서드파티 모듈이기 때문에 설치를 해야 한다.

터미널에서 다음과 같은 명령어를 입력해준다. - npm install axios

설치가 완료되면 다음과 같이 폴더 내에

모듈 파일과 json 파일이 생성되면 정상적으로 설치 된 것이다.

 

이전 fetch를 다뤘던 내용들을

전부 axios 문법으로 바꾸면서 axios에 대해 공부할 것이기 때문에

axiosApi.js 파일을 생성하고 api.js파일의 내용을 그대로 복사해준다.

 

▶ axiosApi.js 파일

더보기 
// axiosApi.js

// GET /api/color-surveys

export async function getColorSurveys(params ={}){
  const url = new URL('https://learn.codeit.kr/api/color-surveys'); // 잘못된 URL 입력 (오류 예시)
  Object.keys(params).forEach((key) => 
    url.searchParams.append(key, params[key])
    );

  const res = await fetch(url); 
  const data = await res.json();

  return data;
}

// ----------------------------------------------------------------------

// GET /api/color-surveys:id
export async function getColorSurvey(id){
  const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`);
  const data = await res.json();
  return data;
}

// ----------------------------------------------------------------------

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await fetch('https://learn.codeit.kr/api/color-surveys',{ 
    method: 'POST', 
    body: JSON.stringify(surveyData), 
    headers: {
      'Content-Type': 'application/json', 
    }
  });
  const data = await res.json(); 
  return data;
}

모듈 설치도 끝났으니 그럼, 본격적으로 axios를 활용해보자

fetch -> axois 

먼저 axiosApi 파일에서 getColorSurvey 함수를 axios 형식으로 바꿔보자

 

우선 axois를 임포트 해주고

axios로 GET 리퀘스트를 보내려면 axios.get 메소드를 사용하면 된다.

// axiosApi.js
import axios from 'axios'; // axios 라이브러리 불러오기

// GET /api/color-surveys
export async function getColorSurveys(params ={}){
  const url = new URL('https://learn.codeit.kr/api/color-surveys');
  Object.keys(params).forEach((key) => 
    url.searchParams.append(key, params[key])
    );

  const res = await fetch(url); 
  const data = await res.json();

  return data;
}

// ----------------------------------------------------------------------

// GET /api/color-surveys:id
export async function getColorSurvey(id){
  const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`); // axios.get() 사용
  const data = await res.json();
  return data;
}

// ----------------------------------------------------------------------

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await fetch('https://learn.codeit.kr/api/color-surveys',{ 
    method: 'POST', 
    body: JSON.stringify(surveyData), 
    headers: {
      'Content-Type': 'application/json', 
    }
  });
  const data = await res.json(); 
  return data;
}

axios 역시 Promise를 리턴하기 때문에 앞에 await을 사용한다.

 

그리고 data 변수 내에서 res.json을 지우고 

res. 까지 입력하면 뒤에 사용할 수 있는 프로퍼티들을 보여주는데

axios에서는 바디 내용을 파싱할 필요 없이

그냥 데이터 프로퍼티로 가져오면된다.

(상태 코드나 status나 헤더 headers를 가져올 수도 있다)

// GET /api/color-surveys:id
export async function getColorSurvey(id){
  const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`); // axios.get() 사용
  const data = res.data; // res.data로 데이터에 접근
  return data;
}

그리고 데이터 변수에 할당할 필요 없이 그냥 리턴 해준다.

// GET /api/color-surveys:id
export async function getColorSurvey(id){
  const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`); // axios.get() 사용
  return res.data; // res.data로 데이터 반환
}

그렇다면   getColorSurveys 함수도 axios로 바꿔 줄 수 있을 것이다.

// GET /api/color-surveys
export async function getColorSurveys(params ={}){
  const url = new URL('https://learn.codeit.kr/api/color-surveys');
  Object.keys(params).forEach((key) => 
    url.searchParams.append(key, params[key])
    );

  const res = await axios.get(url); // axios.get() 사용
  return res.data; // res.data로 데이터 반환
}

 

그리고 쿼리 파라미터도 조금 더 쉽게 처리할 수 있는데

URL 객체를 사용할 필요 없이 params 옵션을 사용하면 된다.

다음과 같이 params를 사용해 코드를 수정한다.

// GET /api/color-surveys
export async function getColorSurveys(params ={}){
  const res = await axios.get(
    'https://learn.codeit.kr/api/color-surveys',
    { params },
  );
  return res.data; // res.data로 데이터 반환
}

이 문법은 params라는 프로퍼티로 params 객체를 설정하는 것이며

이렇게 쿼리 파라미터를 담고 있는 객체를 전달하면 

객체에 있는 프로퍼티들로 알아서 쿼리 스트링을 만들고

URL 뒤에 붙여서 리퀘스트를 보내 준다.

만약 프로퍼티 값이 null이나 undefined면

그 프로퍼티를 무시하고 쿼리 스트링을 만들어준다.

그렇다면 POST 리퀘스트를 보내는 방법도 알아보자.

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await fetch('https://learn.codeit.kr/api/color-surveys',{ 
    method: 'POST', 
    body: JSON.stringify(surveyData), 
    headers: {
      'Content-Type': 'application/json', 
    }
  });
  const data = await res.json(); 
  return data;
}

GET은 axios.get을 사용했으니까

POST는 axios.post를 사용하면 된다.

즉, 각 HTTP 메소드는 동일한 이름의 axios 메소드를 사용하면 된다.

 

다음과 같이 코드를 수정한다.

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await axios.post('https://learn.codeit.kr/api/color-surveys',{ 
    method: 'POST', 
    body: JSON.stringify(surveyData), 
    headers: {
      'Content-Type': 'application/json', 
    }
  });
  return res.data;
}

그리고 POST 메소드는 바디로 전달할 데이터를 두 번째 아규먼트로 받는데 

자바스크립트 객체를 그대로 사용할 수 있다.

다음과 같이 코드를 수정한다.

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await axios.post(
    'https://learn.codeit.kr/api/color-surveys',
    surveyData,
    { 
    method: 'POST', 
    body: JSON.stringify(surveyData), 
    headers: {
      'Content-Type': 'application/json', 
    }
  });
  return res.data;
}

axios가 알아서 자바스크립트 객체를 JSON 문자열로 변환해 주기 때문에

JSON.stringify 같은 메소드를 쓰지 않아도 되는 것이다.

그리고 헤더도 바디 데이터를 보고 알아서 설정해 주기 때문에

본인이 직접 설정하지 않아도 된다.

다음과 같이 코드를 지워준다.

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await axios.post(
    'https://learn.codeit.kr/api/color-surveys',
    surveyData,
  );
  return res.data;
}

 

코드를 총 정리해보면 다음과 같다.

// axiosApi.js
import axios from 'axios'; // axios 라이브러리 불러오기

// GET /api/color-surveys
export async function getColorSurveys(params ={}){
  const res = await axios.get( // axios.get() 사용
    'https://learn.codeit.kr/api/color-surveys',
    { params }, // 두 번째 파라미터 객체로 params 전달
  );
  return res.data; // res.data로 데이터 반환
}

// ----------------------------------------------------------------------

// GET /api/color-surveys:id
export async function getColorSurvey(id){
  const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`); // axios.get() 사용
  return res.data; // res.data로 데이터 반환
}

// ----------------------------------------------------------------------

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await axios.post( // axios.post() 사용
    'https://learn.codeit.kr/api/color-surveys',
    surveyData, // body 데이터를 두 번째 아규먼트로 전달
  );
  return res.data; // res.data로 데이터 반환
}

 

코드가 훨씬 간단해진 것을 볼 수있는데

리퀘스트의 바디가 필요없는 GET이나 DELETE는

옵션을 두 번째 파라미터로 받고 

 

바디가 필요한 POST나 PATCH, PUT은

바디 데이터를 두 번째 아규먼트로 받고

옵션을 세 번째 아규먼트로 받는다.

 

대충 정리하면 이렇다.

  • GET/DELETE: axios.get(url, options)
    • 두 번째 인자는 옵션 객체 (예: params).
  • POST/PATCH/PUT: axios.post(url, data, options)
    • 두 번째 인자는 실제 전송할 데이터 (body).
    • 세 번째 인자는 옵션 객체 (필요한 경우).

옵션에서는 헤더, 쿼리파라미터, 타임아웃등 다양한 걸 설정할 수 있으며

이 링크를 참고하여 어떤 옵션들이 있는지 확인할 수 있다.

 

여기까지 axios의 기본 문법이다.

axios 자주 사용하는 기능 - instance

axios에서는 인스턴스(instance) 라는 것을 만들 수 있는데

리퀘스트마다 공통되는 부분이 있으면 그걸 인스턴스에서 설정할 수 있다.

 

예를 들어 리퀘스트 URL은 보통 경로만 다르고 앞부분은 항상 똑같은데

다음과 같이 baseURL로 앞부분을 설정하고

리퀘스트 timeout도 3초로 설정 해보자.

const instance = axios.create({ // axios.create()로 인스턴스 생성
  baseURL: 'https://learn.codeit.kr/api/', // baseURL 설정
  timeout: 3000, // 3초로 타임아웃 설정
})

인스턴스에서 baskURL을 설정했으니까

axios를 사용하는 곳에 다음과 같이 바꿔준다.

// axiosApi.js
import axios from 'axios'; // axios 라이브러리 불러오기

const instance = axios.create({ // axios.create()로 인스턴스 생성
  baseURL: 'https://learn.codeit.kr/api', // baseURL 설정
  timeout: 3000, // 3초로 타임아웃 설정
})

// GET /api/color-surveys
export async function getColorSurveys(params ={}){
  const res = await instance.get( '/color-surveys',{ params }); // 인스턴스로 get 요청
  return res.data; 
}

// ----------------------------------------------------------------------

// GET /api/color-surveys:id
export async function getColorSurvey(id){
  const res = await instance.get(`/color-surveys/${id}`); // 인스턴스로 get 요청
  return res.data;
}

// ----------------------------------------------------------------------

// POST /api/color-surveys
export async function createColorSurvey(surveyData){
  const res = await instance.post('/color-surveys',surveyData); // 인스턴스로 post 요청
  return res.data;
}

인스턴스로 리퀘스트를 보내고 있기 때문에

모두 baseURL과 timeout이 설정되어 있다.

이제 URL 앞부분이 변동되거든 한 군데서만 바꾸면 된다.

 

그럼 axios 함수들이 잘 작동하는지 테스트해보자

// main

import { getColorSurveys , getColorSurvey, createColorSurvey } from './axiosApi.js';

console.log('GET /color-surveys');
const data = await getColorSurveys({ offset:10, limit:5 });
console.log(data);

console.log('GET /color-surveys/:id');
const survey = await getColorSurvey(20);
console.log(survey);

console.log('POST /color-surveys');
const surveyData = {
  mbti: 'ISFP',
  colorCode: '#123456',
  password: '0000',
};
const newColorSurvey = await createColorSurvey(surveyData);
console.log(newColorSurvey);

결과가 잘 출력 되는 것을 확인할 수 있다.

반응형

'JS' 카테고리의 다른 글

(8) ~ (9) axios 정리  (0) 2025.02.05
(9) Sending a request with JavaScript - axios 오류 처리  (0) 2025.02.05
(1) ~ (7) fetch 정리  (0) 2025.02.04
(7) Sending a request with JavaScript - 웹에서 리퀘스트 확인(Network 기능)  (0) 2025.02.04
(6) Sending a request with JavaScript - 오류 처리  (0) 2025.02.03
JS 관련 글
더 보기

티스토리툴바