S2) Unit 3. [JS] fetch & Axios

📣 fetch API

✔️ 동적으로 데이터를 받아야 하는 경우 사용한다.

✔️ 특정 URL로부터 정보를 받아오는 역할을 한다.

✔️ 과정이 비동기로 이루어지기 때문에 시간이 소요되는 작업을 요구할 경우에는 blocking이 발생하면 안되므로 특정 DOM에 정보가 표시될 떄까지 로딩 창을 대신 띄우는 경우도 있다.

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));
  
  
  //{id: 1, title: '정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는 정부는 헌법재판소에 그 해산을 제소할 수 있고, 
  //정당은 헌법재판소의 심판에 의하여 해산된다.', content: '모든 국민은 인간으로서의 존엄과 가치를 가지며, 
  //행복을 추구할 권리를 가진다. 모든 국민은…진다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다.', 
  //createdAt: '2019-02-24T16:17:47.000Z', updatedAt: '2019-02-24T16:17:47.000Z', …}

➰ 개발자 도구의 콘솔에서 fetch API를 사용하여 데이터를 요청한다.

➰ 위 처럼 주어진 url에서 데이터를 받아온다.

 

📣 Axios

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

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

 

✔️ Axios 사용법

 

1️⃣ 설치

npm install axios

 

2️⃣ GET 요청

✔️ 일반적으로 정보를 요청하기 위해 사용되는 메서드

✔️ 첫 번째 인자에는 url주소가 필수적으로 들어가고, 두 번째 인자에는 요청 시 사용할 수 있는 옵션들을 선택적으로 넣어줄 수 있다.

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

 

3️⃣ POST 요청

✔️ 서버에게 데이터를 보내기 위해 사용되는 메서드

✔️ 첫 번째 인자에는 url주소가 필수적으로 들어가고, 두 번째 인자에는 요청 시 보낼 데이터를 상황에 따라 설정해준다.

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

 

 

📣 Fetch와 Axios의 사용 예시

1️⃣ GET 요청

// fetch

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

 request();

// axios

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

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

 request();

 

 

2️⃣ POST 요청

// fetch

// 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 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

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

// Promise ver
axios
  .post('https://koreanjson.com/users', { nickName: 'ApeachIcetea', age: '20' })
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));


// 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();