`Axios`란?

axios란, 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

백엔드와 프론트엔드랑 통신을 쉽게 하기 위해 사용되는 라이브러리

`axios` 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경

HTTP(HyperText Transfer Protocol)란? HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜. 통신 규약.

`axios` 사용법

axios의 Request method는

GET : axios.get(url[, config])
POST : axios.post(url, data[, config])
PUT : axios.put(url, data[, config])
DELETE : axios.delete(url[, config])

axios에서 Request Method를 사용하기 위해서는 axios에 .을 붙히며 소문자로 Req Method를 넣어주면 된다.

그리고 해당 메서드의 파라미터에는 API의 주소를 넣는다.

:: `axios`의 기본적인 사용법

일반적으로 axios의 4가지 기본 메서드를 사용하기 위해 지정해야할 것들이 있다.

4가지 기본 Params

Method
Url
Data (optional)
Params (optional)

이 4가지 방법을 axios에 알려줘야 한다.

axios({
  method: "get",
  url: "url",
  responseType: "type",
}).then(function (response) {
  // response Action
});

만약 POST 메서드에서 data를 전송하기 위해서는 url 밑에 data Object를 추가하면 된다.

:: `axios`의 단축 사용법

4가지 기본 파라미터를 생략하거나 간결하게 사용할 수 있다

`axios.get()`

axios.get()을 사용하는 2가지 상황이 있는데 2가지 상황에 따라 params: {} 객체가 존재할지 안할지가 결정된다.

단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우

// callback 을 사용할 때,
axios
  .get("url")
  .then((response) => {
    // response
  })
  .catch((error) => {
    // 오류발생시 실행
  })
  .then(() => {
    // 항상 실행
  });

// async await 함수를 사용할 때,
try {
  const data = await axios.get("url");
} catch {
  // 오류 발생시 실행
}

파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)

axios.get("url", {
        params: {
          	id: 123
        }
    })
    .then(response => {
         // response
    }).catch(error => {
        // 오류발생시 실행
    }).then(() => {
        // 항상 실행
    });


// async await 함수를 사용할 때,
try {
	const data = await axios.get("url",
         params: {
			id: 123
		 }
    );
} catch {
	// 오류 발생시 실행
}

`axios.post()`

post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보낸다. get 메서드에서 params를 사용한 경우와 비슷하게 수행된다.

axios
  .post("url", {
    username: "",
    password: "",
  })
  .then((response) => {
    // response
  })
  .catch((error) => {
    // 오류발생시 실행
  })
  .then(() => {
    // 항상 실행
  });

// async await 함수를 사용할 때,
try {
  const data = await axios.post("url");
} catch {
  // 오류 발생시 실행
}

`axios.put()`

put 메서드는 서버 내부적으로 get ➔ post 과정을 거치기 때문에 post 메서드와 비슷한 형태이다.

axios
  .put("url", {
    username: "",
    password: "",
  })
  .then((response) => {
    // response
  })
  .catch((error) => {
    // 오류발생시 실행
  })
  .then(() => {
    // 항상 실행
  });

// async await 함수를 사용할 때,
try {
  const data = await axios.put("url", {
    username: "",
    password: "",
  });
} catch {
  // 오류 발생시 실행
}

`axios.delete()`

delete 메서드에는 일반적으로 body가 비어있다. 그래서 형태는 get과 비슷한 형태를 띄지만 한 번 delete 메서드가 서버에 들어가게 된다면 서버 내에서 삭제 process를 진행하게 된다.

axios
  .delete("/user?ID=12345")
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  })
  .then(() => {
    // always executed
  });

// async await 함수를 사용할 때,
try {
  const data = await axios.delete("url");
} catch {
  // 오류 발생시 실행
}

많은 데이터를 요청할 경우 하지만 query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때는 두 번째 인자에 data를 추가해줄 수 있다.

axios
  .delete("/user?ID=12345", {
    data: {
      post_id: 1,
      comment_id: 5,
      username: "april",
    },
  })
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  })
  .then(() => {
    // always executed
  });

// async await 함수를 사용할 때,
try {
  const data = await axios.delete("url");
} catch {
  // 오류 발생시 실행
}

:: React에서 `axios` 사용

보통 프로젝트에서는

API의 스펙, 서버의 주소, credentials 설정을 담당하는 API.js 라는 파일을 만들고
axios 의 기본 설정에 대해서 지정해주고
각각의 서비스에서 가져가 사용하는 형태로 구현.

`axios` 의 인스턴스 생성/async await 통신

먼저 axios 의 인스턴스를 생성해서 API라는 변수에 담고 API를 반환시킨다.

// API.js
// axios 의 인스턴스를 생성
import axios from "axios";

const API = axios.create({
  BASE_URL: "",
  headers: {
    "Content-Type": "application/json",
  },
  withCredentials: true,
});

export default API;

각각 파일에서는 async await 으로 콜백을 처리하여 통신한다.

import API from "../utils/API";

export const login = async (code) => {
  const { data } = await API.post("url", JSON.stringify(code));
  return data;
};

Error Handling을 위한 try-catch문 사용

import API from "../utils/API";

export const refresh = async () => {
  try {
    const { data } = await API.get("url");
    return data;
  } catch {
    // Error Handling
  }
};

Axios란?

axios 특징

axios 사용법

:: axios의 기본적인 사용법

:: axios의 단축 사용법

axios.get()

axios.post()

axios.put()

axios.delete()

:: React에서 axios 사용

axios 의 인스턴스 생성/async await 통신