[React] Ajax, Axios, Fetch (feat. Axios 사용법)

HTTP 요청을 보내는데에 Ajax, Axios, fetch 등을 사용할 수 있다.

 

Axios와 Fetch는 결국 Ajax 를 구현하는 라이브러리 또는 API로 볼 수 있는데

3개의 간단한 개념을 알아보고, Axios 의 사용법에 대해서 자세히 알아보자

 

---

 

Ajax 란?

• Ajax 쓰면 GET, POST 요청할 때 새로고침 없이 데이터 주고받기가 가능하다.
• Asynchronous JavaScript and XML 의 약자로 비동기적으로 서버와 통신해서 웹 페이지를 업데이트 할 수 있다.
• Ajax 는 XMLHttpRequest 객체를 사용해서 HTTP 요청을 보내고 응답을 처리한다.
• (오래된 방식의 비동기 통신 방식임)
• 주로 jQuery 의 Ajax 모듈을 사용한다고 한다.

---

Axios 란?

• Promise 기반의 HTTP 클라이언트 라이브러리이다.
• 브라우저와 Node.js에서 모두 사용이 가능하다.
• Axios 는 Ajax 와 마찬가지로 HTTP 요청을 보내고 응답을 처리하는데 더 간결하고 사용하기 쉬운 API를 제공한다.
• jQuery 없이 사용 가능하다.

---

Fetch 란?

• 웹 브라우저에 내장된 API
• Promise 를 반환
• Axios 와 유사한 간단한 구문과 기능을 가짐
• Fetch API 는 모던 브라우저에서 지원됨

쌩자바스크립트 문법이다. fetch 쓰려면 json 을 object나 array 로 바꿔주는 과정이 필요하다

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

---

Axios 사용법

설치

npm install axios

GET 요청 보내기

// Axios 라이브러리를 가져옵니다.
const axios = require('axios');

// GET 요청을 보냅니다.
axios.get('https://api.example.com/data')
  .then(response => {
    // 성공적인 응답을 처리합니다.
    console.log(response.data);
  })
  .catch(error => {
    // 에러를 처리합니다.
    console.error(error);
  });

POST 요청 보내기

const axios = require('axios');

// POST 요청에 보낼 데이터
const data = {
  username: 'john',
  password: 'secret'
};

// POST 요청을 보냅니다.
axios.post('https://api.example.com/login', data)
  .then(response => {
    // 성공적인 응답을 처리합니다.
    console.log(response.data);
  })
  .catch(error => {
    // 에러를 처리합니다.
    console.error(error);
  });

HTTP 헤더 설정하고 GET 요청 보내기

const axios = require('axios');

// GET 요청을 보낼 때 사용할 헤더
const headers = {
  Authorization: 'Bearer your_token',
  'Content-Type': 'application/json'
};

// 헤더를 포함하여 GET 요청을 보냅니다.
axios.get('https://api.example.com/data', { headers })
  .then(response => {
    // 성공적인 응답을 처리합니다.
    console.log(response.data);
  })
  .catch(error => {
    // 에러를 처리합니다.
    console.error(error);
  });

 

---

동시에 요청 여러개 날리기

Promise.all([axios.get('https://api.example.com/data1'), axios.get('https://api.example.com/data2')])
  .then(results => {
    console.log(results[0].data); // URL1의 응답 데이터
    console.log(results[1].data); // URL2의 응답 데이터
  })
  .catch(error => {
    console.error(error);
  });

Promise.all() 은 여러개의 프로미스를 동시에 실행하고, 모든 프로미스의 결과를 기다리는 메서드이다.

제공된 모든 프로미스가 성공적으로 완료될 때까지 기다리고, 결과를 배열로 반환한다.