1. Axios

axios는 node.js 와 browser 를 위한 Http 통신 라이브러리입니다.

2. Axios 설치

axios 를 사용하기 위해선 라이브러리를 설치해주어야 합니다.

npm 사용

npm install axios

3. Axios 사용하기

axios 를 사용해 서버와 소통하는 과정

1. 서버에 요청(Request)을 보냅니다.
2. 서버로부터 응답(Response)이 오면 제대로 응답이 왔는지 아닌지를 구분하여 처리합니다.

서버에 요청을 보냈을 때 응답이 오기전까지 시간이 걸리므로 서버에 보내는 요청은 비동기 처리를 해주며, 요청 후 응답이 오면 .then 이나 await를 이용하여 처리를합니다.

서버에 요청을 보내는, Axios 는 4가지 메소드들이 있습니다.

1. GET : 서버에서 어떤 데이터를 가져와서 보여줌
2. POST : 서버로 데이터를 보냄
3. PUT : 데이터베이스 내부 내용 갱신
4. DELETE : 데이터베이스 내부 내용 삭제

4가지 메소드들을 사용할때 같이 보내야 하는 정보들이 있습니다.

1. 어떤 메소드를 사용할 것인지
2. url 주소
3. data (선택적)
4. params(선택적)

Aixos 를 이용하는 기본적인 형식

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

3-1. Get 메소드

axios.get(url[,config])

서버에 데이터를 가져오는 Get 메소드는 두 가지 상황이 존재합니다.

1. 지정된 단순 데이터를 요청하는 경우, url만 파라미터로 넘깁니다.

async function getData() {
  try {
    //응답 성공
    const response = await axios.get('url주소');
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

2. 사용자 번호에 따라 다른 데이터를 불러오는 경우, url과 함께 prams:{} 객체도 파라미터로 넘김

async function getData() {
  try {
    //응답 성공
    const response = await axios.get('url주소',{
      params:{
        //url 뒤에 붙는 param id값
        id: 12345
      }
    });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

출처: devstone 벨로그
Aixos에 대해 쉽고 이해가 잘되게 정리를 잘해 두셔서 벨로그를 읽어보면서 제 벨로그에 정리를 했습니다.