Vue에서 Axios로 reqres.in에 RestAPI 요청 보내보기

문서 링크: https://axios-http.com/kr/docs/intro (한글화 잘 되어있어서 너무 좋아요)

Axios란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

위 설명은 Axios 문서 홈에 있는 설명입니다. 쉽게 설명하면 자바스크립트의 기본 http 요청 라이브러리를 쉽게 사용할 수 있게 해주는 라이브러리라는 뜻입니다.

특징

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

보안적인 처리를 지원하고, RestAPI에서 필요한 여러 기능과 비동기를 지원한다는 뜻입니다. 그렇다면 한 번 사용해볼까요?

실습

본 실습은 vue.js 환경을 이용했습니다.

• pages/index.vue에 아래 코드 입력

<template>
  <div class="home">
    <h1>Index Page</h1>
    <h2>테스트 요청을 보내봅시다.</h2>
    <div>
      <button @click="onClickTestBtn">테스트 요청</button>
      {{ data }}
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";

definePageMeta({
  layout: "default",
});

const data = ref("");

async function onClickTestBtn() {
  const res = await axios.get("https://reqres.in/api/users?page=2");
  data.value = res.data;
}
</script>
<style lang="scss" scoped></style>

• https://reqres.in/ 는 https요청을 보내볼 수 있는 여러 테스트 api url을 제공하는 사이트입니다.
• 아래와 같이 테스트 JSON 데이터가 온 것을 확인할 수 있습니다. 네트워크 통신에 성공했습니다!

• axios에선 get, post, put, delete 메소드를 모두 지원합니다. 그럼 가장 많이 사용되는 Post 요청도 봐볼까요?
• 아래 예제 사이트의 Post 요청의 JSON 원형은 아래와 같습니다.

axios로 위 요청을 만들어보면 아래와 같습니다.

<template>
  <div class="home">
    <h1>Index Page</h1>
    <h2>테스트 요청을 보내봅시다.</h2>
    <div>
      <button @click="onClickTestBtn">테스트 요청</button>
      <button @click="onClickCreateUserBtn">테스트 유저 생성</button>
      {{ data }}
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import type { AxiosResponse } from "axios";

definePageMeta({
  layout: "default",
});

// 2. 요청 보낼 인터페이스
interface UserRequest {
  name: string;
  job: string;
}

// 3. 응답 받을 인터페이스
interface UserResponse {
  name: string;
  job: string;
  id: string;
  createdAt: string;
}

// 화면에 표시해줄 데이터
const data = ref<string | UserResponse>("");

// get 테스트 버튼 클릭 이벤트
async function onClickTestBtn() {
  const res = await axios.get("https://reqres.in/api/users?page=2");
  data.value = res.data;
}

// post 유저 생성 테스트 버튼 클릭 이벤트
async function onClickCreateUserBtn() {
  // 1. axios post 요청
  const res = await axios.post<UserRequest, AxiosResponse<UserResponse>>(
    "https://reqres.in/api/users",
    {
      name: "foo",
      job: "bar",
    }
  );
	
	// 4. 데이터 변수에 할당
  data.value = res.data;
}
</script>
<style lang="scss" scoped></style>

Axios Post 함수의 타입 원형을 보면 아래와 같습니다.

post<T = any, R = AxiosResponse<T>, D = any>
(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;

• T, R = AxiosResponse<T>, D로 제너럴 타입을 받은 후 Promise<R>을 반환해줍니다. 간단하게 설명하면 request, response, config의 타입을 정해서 넣어주면 response 타입을 감싼 Promise 객체를 반환해준단 뜻입니다. 그러면 단계 별로 알아볼까요?

1. Axios 요청 함수입니다.

 const res = await axios.post<userrequest, axiosresponse<userresponse="">>(
    "<https://reqres.in/api/users>",
    {
      name: "foo",
      job: "bar",
    }
  );
// 4. ref 변수에 데이터 할당
data.value = res.data;
</userrequest,>

1. request타입에 UserRequest를 넣어주고
2. response타입에 AxiosResponse<UserResponse>>를 넣어줍니다. Config는 any이므로 넣어도 되고 안 넣어도 됩니다. 필요할 때 넣어줍시다.
3. 이제 받은 데이터를 ref 변수에 할당해줍니다. 화면에 데이터 텍스트가 뜨는 것을 볼 수 있습니다.

put, delete는?

• get은 delete와 원형이 같으며
• post는 put과 원형이 같습니다. 한마디로
• delete는 get처럼, put은 post처럼 사용하면 된다는 의미입니다.

get, post, put, delete 완성!

post와 put은 왜 나눠서 쓰는걸까?

참고: https://velog.io/@53_eddy_jo/RESTful한-세계에서의-POST와-PUT의-차이-거기에-FETCH까지

가장 중요한 점은 “멱등성”입니다. 멱등성이란 항상 같은 결과가 나오는 것입니다. post는 create를 포함한 요청을 보낼 수 있으며 새로운 데이터의 생성, 데이터의 수정이 모두 가능하지만 put은 데이터의 수정에만 사용되며 같은 요청에 대해서 항상 같은 응답을 보냅니다. 이것이 유용한 한 가지 예로는 put을 사용한다면 Auto Increase 컬럼을 포함한 테이블에서의 예상치 못한 데이터 추가로 인한 id 꼬임 등의 상황을 예외상황에서 제외시킬 수 있습니다.