[React] axios에 대해서 알아보자!

Axios란?

Axios란 브라우저, Node JS를 위한 HTTP 비동기 통신 라이브러리다.

 

Promise 기반이며, async, awit 사용이 가능하며, JavaScript의 내장 라이브러리인 fetch와 다르게 설치를 통해서 사용이 가능하며, 구버전의 브라우저와 호환이 되기에, 데이터를 JSON 형태로 자동 변환할 수 있다.

 

Axios 사용하기.

npm 혹은 yarn을 이용하여 axios를 설치한다.

#Use npm
npm install axios

#Use Yarn
yarn add axios

설치 후엔 사용할 파일에 적용해준다.

//JS ES6의 import 이용
import axios from "axios"

 

Axios의 기본적인 사용 방법은 아래와 같다.

//Axios GET [1]
axios({
  method : "GET",
  URL : "URL",
})

//Axios GET [2]
axios.get("URL")

then()과 catch()를 이용하여, 요청 후 응답이 왔을 때와 에러가 발생 했을 때의 분기처리가 가능하다.

//URL 주소에 POST방식으로 DATA객체(TEXT : "HELLO")를 전송함
axios({
  method : "POST",
  URL : "URL",
  DATA : {
    text : "HELLO"
  }
})

.then((res) => {
  //응답 res를 이용하여, 응답이 온 후의 코드 실행
})

.cahch((err) => {
  //에러가 발생할 경우의 err를 이용한 코드 실행
})

 

Axios로 POST 방식으로 Login 요청

/*
* 해당 API가 존재한다고 가정
* URL : http://localhost:8080/api/login
* METHOD : "POST"
* Request Data : {id : id, pw : pw }
* Response Data(성공 시) : {result : true}
* Response Data(실패 시) : {result : false}
*/

axios({
  url : "http://localhost:8080/api/login",
  method : "post",
  data : {
    id : "admin",
    pw : "1234"
  }
})

.then((res) => {
  res.data.result ? console.log("Success") : console.log("False") //로그인 성공 시 Success, 실패시 False Console.log함
})
.catch(err = > console.log(err)) //Error의 경우 console.log(err)