[node.js] axios를 이용한 비동기 통신

0. 목차

1. 개요

2. axios 설치

3. get 요청

4. post요청

1.개요

비동기 통신을 하는 방법에는 크게 3가지 방법이 있다.

 

1. XMLHttpRequest

2. fetch

3. axios

 

1번은 한번 쳐보고 데이터가 어떻게 전달되고 전달 받는지만 보면 충분한 것 같고,

2번은 실제로 사용해을 해보았다.

2022.02.17 - [경일/nodejs] - [node.js] ajax, fetch, async, await, 로그인 기능 구현

[node.js] ajax, fetch, async, await, 로그인 기능 구현

위 포스팅 뿐 만 아니라, 

https://github.com/green-kong/team6_login_board

GitHub - green-kong/team6_login_board

위 프로젝트를 진행할 때 fetch 를 이용해서 댓글기능을 구현했었다.

 

이번에는 axios 다.

2. axios 설치

axios를 설치에는 두가지 방법이 있다.

 

npm, yarn, bower 등을 이용한 패키지 설치와,

$ npm install axios

 

script 태그 안에 cdn을 박아넣는 방법

 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

프론트에서 사용할 때는 웹팩을 사용하지 않는이상 위의 방법으로는 axios를 땡겨 오기가 힘들다.

그래서 그냥 cdn으로 때려넣는게 편-안

3. get 요청

실제로 사용을 해보자.

 

async function axiosExample() {
  const response = await axios.get(url);
  const { data } = response;
}

놀랍게도 이게 다다.

저 url 자리에 get요청을 보낼 url만 적어주면 된다.

url 변수에 담아서 전달해주면 더 깔끔할거다.

 

그럼 서버에서 응답을 보내주는데, 그 응답을 response에 담아준다.

그런데 response를 console.log 로 찍어보면 객체가 나온다.

그중에서 우리가 필요한 값은 data이다.

 

destructuring 를 이용해서 값을 빼내준 뒤에,

data를 가지고 화면을 구성해주면 된다.ㅎ

 

 

4. post 요청

post 요청도 매우 쉽다.

 

async function axiosExample() {
  const url = 'http://localhost:3000';
  const body = {
    exam: 'kong',
    exam1: '1234',
  };
  const header = {
    'Content-type': 'application/json',
  };

  const result = await axios.post(url, body, header);
  const { data } = result;
}

이런식으로 해주면 되는데,

우리의 놀라운 axios는 JSON.stringfy같은거 안해줘도 된다.

지 알아서 처리한다.

그리고 더 놀라운 거는 header 부분도 설정안해도 된다.

body 부분에 서 전송되는 데이터 타입(json, x-www-form-urlencoded)을 판별하고

지 알아서 콘텐트타입을 변경해준다.

 

그러니까

 

async function axiosExample() {
  const url = 'http://localhost:3000';
  const body = {
    exam: 'kong',
    exam1: '1234',
  };
  
  const result = await axios.post(url, body);
  const { data } = result;
}

요렇게만 해주면 된다.

 

그리고 응답에 대한 처리는 get요청과 동일하다.

 

비동기 통신의 진화과정의 최정점에 서있는 axios에 대해 알아봤다.

확실히 진화가 될수록 편해지는데,

그래도 기본적으로 데이터가 어떻게 전송되는지는 찬찬히 확인을 하고 숙지를 한뒤 사용을 하는것과 

그렇지 않고 무작정 사용만 하는 것에는 큰 차이가 있는 듯 하다.

 

axios를 이용해 구현한 회원가입의 id 중복체크는 아래 깃헙 주소에 올려뒀다.

 

https://github.com/green-kong/TIL/tree/master/220304/axios

GitHub - green-kong/TIL: Today I learned...