[JS] Fetch API // Axios

📌 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

✅ Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있습니다.

 

Fetch API vs Axios

 

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

 

Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치

 ➡️ npm install axios

 

---

GET 요청

GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드입니다.

첫번째 인자에는 url주소가 들어갑니다.

url주소는 필수입니다.

두번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정하게 됩니다.

옵션의 경우 필수는 아닙니다.

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

fetch API

Promise

→

// Promise ver
fetch('<https://koreanjson.com/users/1>', { method: 'GET' })
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

async_await

→

async function request() {
  const response = await fetch('<https://koreanjson.com/users/1>', {
    method: 'GET',
  });
  const data = await response.json();
  console.log(data);
}

request();

.json()은 Response 스트림을 가져와 스트림이 완료될때까지 읽는다.

그리고 다 읽은 body의 텍스트를 Promise형태로 반환한다.

axios

Promise

→

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Promise ver
axios
  .get('<https://koreanjson.com/users/1>')
  .then((response) => {
    const { data } = response; // response 에 받아와서 data 할당
    console.log(data); // object
  })
  .catch((error) => console.log(error));

async_await

→

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Async / Await ver
async function request() {
  const response = await axios.get('<https://koreanjson.com/users/1>');
  const { data } = response;
  console.log(data);
}

request();

---

POST 요청

POST 요청은 서버에게 데이터를 보내기 위해 사용되는 메서드입니다.

첫번째 인자에는 url주소가 들어갑니다.

url주소는 필수입니다.

두번째 인자에는 요청 시 보낼 데이터를 설정하게 됩니다.

옵션의 경우 필수는 아니지만 상황에 따라 설정해주어야 합니다.

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

fetch API

Promise

→

// Promise ver
fetch('<https://koreanjson.com/users>', {
  method: 'POST',
  headers: {
    // JSON의 형식으로 데이터를 보내준다고 서버에게 알려주는 역할입니다.
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ nickName: 'ApeachIcetea', age: 20 }),
})
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

async_await

→

// Async / Await ver
async function request() {
  const response = await fetch('<https://koreanjson.com/users>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ nickName: 'ApeachIcetea', age: 20 }),
  });
  const data = await response.json();
  console.log(data);
}

request();

axios

Promise

→

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Promise ver
axios
  .post('<https://koreanjson.com/users>', { nickName: 'ApeachIcetea', age: '20' })
  .then((response) => {
    // console.log(response) 
    const { data } = response; // 중괄호로 받아오자 입력한 객체 정보 data 를
    console.log(data); // { nickName: 'ApeachIcetea', age: '20' }
  })
  .catch((error) => console.log(error));

async_await

→

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Async / Await ver
async function request() {
  const response = await axios.post('<https://koreanjson.com/users>', {
    name: 'ApeachIcetea',
    age: '20',
  });
  const { data } = response;
  console.log(data);
}

request();