fetch API

---

fetch API로 URL을 통한 네트워크요청(비동기 요청)이 가능하다.

→ 이 과정은 비동기로 이뤄지기 때문에, 경우에 따라 시간이 소요될 수 있다. 하지만 이 시간동안 blocking이 발생하면 안되므로, 특정 DOM에 정보가 표시될 때 까지 로딩창을 대신 띄우기도 한다.

//fetch API를 사용하여 데이터를 요청

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

Axios 란?

---

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

Axios는 Fetch API보다 사용이 간편하고, 추가적인 기능을 포함하고 있다.

Axios는 자동으로 JSON데이터 형식으로 변환하기 때문에 → .JSON() 할 필요 없다.

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

Axios 사용법

---

1. 설치

//Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치가 필요하다.
npm install axios

2. GET 요청

---

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

첫번째 인자엔 URL 주소가 들어간다(URL 주소는 필수). 두번째 인자엔 요청 시 사용할 수 있는 옵션들을 설정(선택)

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

2-1. 예시

fetch API

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

const appDiv = document.getElementById('app');
appDiv.innerHTML = `
<h1>Fetch API 😊</h1>
<h3>console 창을 확인해주세요! 👇👇👇</h3>
`;

axios GET

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

const appDiv = document.getElementById('app');
appDiv.innerHTML = `
<h1>Axios ☺️</h1>
<h3>console 창을 확인해주세요! 👇👇👇</h3>
`;


3. POST 요청

---

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

첫번째 인자엔 URL 주소가 들어간다(URL 주소는 필수). 두번째 인자엔 요청 시 사용할 수 있는 옵션들을 설정(선택)

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

3-1. 예시

fetch API

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

const appDiv = document.getElementById('app');
appDiv.innerHTML = `
<h1>Fetch API 😊</h1>
<h3>console 창을 확인해주세요! 👇👇👇</h3>
`;

axios GET

// 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 function request() {**
   const response = await axios.post('https://koreanjson.com/users', {
     name: 'ApeachIcetea',
     age: '20',
   });
   const { data } = response;
   console.log(data);
 }

 request();

const appDiv = document.getElementById('app');
appDiv.innerHTML = `
<h1>Axios ☺️</h1>
<h3>console 창을 확인해주세요! 👇👇👇</h3>
`;