[React] axios 사용하기 #axios

제일 많이 쓰고 있는 axios 사용법을 간단하게 알아보자.

개인적으로 post를 제일 많이 쓰기 때문에 post를 예로 들었다. 

서버와의 응답을 주고받는 일이기 때문에 비동기식 처리는 필수!!

 

- 설치

$ npm install axios

 

axios.js

import axios from "axios";

export const postLogin = async (email, password) => {
  try {
    const response = await axios.post(`http://localhost:4000/login`, {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      email: email,
      password: password
    });
    return response.data;
  } catch (error) {
    console.log(error);
  }
};

로그인 하는 js파일을 하나 만들었다. 바로 다른 곳에서 사용 가능하도록 export를 사용했다.

header에 Content-Type을 x-www-form-urlencoded로 맞춰주었다. 서버와 응답을 같이 해야 올바르게 통신이 된다.

 

loginPage.js

import { postLogin } from "../axios";

postLogin = async () => {
    const data = await postLogin(email, password);
    //오는 응답의 형식에 따라 date.~를 바꿔주면 된다.
    if (data.complete) {
      const id = data.message.id;
    } else {
    	//error
    }
  };

위에서 만든 파일의 함수를 import 한다. 

여기서도 비동기 처리를 하지 않으면 올바른 응답이 오지 않았다.

data에 서버에서 오는 응답을 받고 그 응답에 따라 data의 뒤를 다르게 해 주면 된다.

 

axios덕분에 아주 쉽게 응답을 주고받을 수 있다. 모두 모두 애용하자!!