[JS] chapter22. 비동기4 - Axios

 

 

 

📌 비동기

 

 

비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것

js는 싱글 스레드 기반 동작 언어라서 동기적 작동이지만 환경(런타임)에서 비동기 처리를 도와주기 때문에

비동기 처리 또한 가능하다.

 

 

💻 Axios

 

fetch API와 비슷한 역할을 하는 라이브러리 

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

 

 

Fetch API vs Axios

 

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

 

 

Axios 사용법

 

npm install axios // axios 설치

 

GET 요청

 

정보를 요청하기 위해 사용되는 메서드

첫번째 인자 : URL , 두번째 인자 : 요청시 사용할 수 있는 옵션들

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

 

 

 

📍 fetch API와 axios GET 요청의 사용법과 차이점

 

fetch API

 

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>
`;

 

콜솔 결과 (두 값 동일)

 

 

 

POST 요청

 

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

첫번째 인자 : URL , 두번째 인자 : 요청 시 보낼 데이터를 설정

 

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

 

 

📍 fetch API와 axios POST 요청의 사용법과 차이점

 

 

Fetch API의 POST요청

 

// 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의 POST요청

 

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

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

 

 

결과는 VSCODE로 확인해보자!

 

AXOIS는 정말 중요! 백엔드 협업 시 주구장창 할거다 꼭 외워두장