Axios

: Node.js와 브라우저를 위한, Promise 기반 HTTP 비동기 통신 라이브러리

Axios 공식 문서

Fetch API vs Axios

Axios는 Fetch API와 비슷한 역할을 하지만, Fetch API보다 사용이 더 간편하면서 추가적인 기능들이 포함되어 있다.

Fetch API	Axios
빌트인 API라 별도의 설치가 필요 없다.	써드 파티 라이브러리로 설치가 필요하다.
.json() 메소드를 사용해야 한다.	자동으로 JSON 데이터 형식으로 변환해준다.

---

Axios 사용법

Axios 설치하기

1. npm install 명령어로 라이브러리를 다운받는다.

npm install axios

2. Axios를 사용할 파일에서 import해준다.

import axios from 'axios';

GET 요청

axios.get("url"[, config])

• 첫 번째 인자에는 url 주소가 들어간다. (필수)
• 두 번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정할 수 있다. (필수 X)

예시) Promise 사용

axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {        // axios는 자동으로 JSON 데이터 형식으로 변환하기 때문에
    const { data } = response; // .json() 메소드를 사용하지 않아도 된다.
    console.log(data);
  })
  .catch((error) => console.log(error));

---

예시) Async / Await 사용

async function requestData() {
  const response = await axios.get('https://koreanjson.com/users/1');
  const { data } = response;
  console.log(data);
}

requestData();

---

POST 요청

axios.post("url"[, data [, config]])

---

DELETE 요청

axios.delete("url"[, config])

• 기본적으로 Axios의 delete 메소드는 요청 바디에 데이터를 넣을 수 없다.
• 데이터를 넣어 요청을 보내고 싶다면, 두 번째 인자에 data: {} attribute를 추가하고 안에 데이터를 넣어주면 된다.

axios.delete("url", { data: {...} })

예시)

axios
  .delete("url", { data: { accessToken } })
  .then((res) => {
    setIsLogin(false);
    setAccessToken('');
    setGithubUser(null);
    setServerResource(null);
});