AJAX 에서 Axios 그리고 현재 Fetch API 와의 차이점은 무엇인가?

AJAX 에서 Axios 그리고 현재 Fetch API 와의 차이점은 무엇인가?

AJAX (Asynchronous JavaScript and XML)  뜻과  역사 , 사건 발생

 

AJAX(Aynchronous JavaScript and XML)

웹 페이지에서 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다

Axios와 Fetch API는 AJAX를 구현하기 위한 JavaScript 라이브러리 및 API입니다

 

 

처음사용하게된 곳은

-ms

MS는 1999년 3월에 발표된다.
MS가 Ajax같은 기능을 유일하게 제공하고 있었다.

 

-실시간채팅

1998년도 쯤 네오위즈의 세이클럽이 '실시간 채팅'을 구현하기 위해 페이지 리플래시나 hidden iframe 
트릭 같은 것들 대신 아무도 안 쓰던 이 기술을 사용하게 된다.
경쟁 웹 브라우저였던 Netscape는 이런 기술을 지원하지 않았기 때문에 
세이클럽은 어쩔 수 없이 IE 전용으로만 이용이 가능하였다.

 

시간이 흘러 Netscape의 피를 이어받은 

모질라가 2000년 12월 6일에 

Firefox에 사용된 엔진 중 하나인 

Gecko 0.6 버전에 XMLHttpRequest 매서드가 추가되었지만 2002년 6월 5일에 발표된 Gecko 1.0 버전부터 본격적으로 사용되었고, 
사파리 2004년 2월 1.2 버전부터, 

오페라는 2005년 4월부터 연달아 도입되었다.

 

충격의 사건 상황!!!!

 

-구글
2005년 2월 8일에 발표된 구글 지도가 아무런 플러그인 없이 
AJAX로 구현된 웹 애플리케이션으로 밝혀지면서 화제거리가 되었다

 

-한국상황
당시 한국의 지도 서비스는 열이면 열 ActiveX 기반이었기 때문이다. 

 

여기서 큰충격을 받으면서 AjAX으로 바꾸자 생각
XMLHttpRequest를 보완한 비동기(promise) 방식의 Fetch API를 주로 사용

 

Axios 란 무엇이며, 사용용도는? 

 

Axios
Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 작동합니다.
GET, POST와 같은 HTTP 요청을 사용하기 쉽게 만들어주며, AJAX를 사용할 때보다 직관적이고 간결한 코드를 작성할 수 있습니다.
타임아웃 설정, 인터셉터, 요청과 응답 데이터의 변환 등 추가 기능을 제공합니다.

 

따라서, 
서버와 클라이언트 모두에서 쉽고 무난하게 사용할 수 있는 선택지로 Axios를 고려할 수 있습니다.

 

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  //.then 성공햇을시에 콜백함수
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

axios.get('/user?ID=12345')

/user?ID=12345 엔드포인트로 GET 요청을 보냅니다. params 객체를 사용하여 쿼리 파라미터를 전달할 수도 있습니다.

엔드포인트로 GET 요청을 보냅니다. 이는 서버에게 /user 리소스에 대한 요청을 보내고, 

ID라는 쿼리 파라미터에 12345 값을 전달합니다.

 

엔드포인트란?

// Node.js 환경에서 실행할 경우 필요한 모듈을 가져옵니다.
const http = require('http');

// 간단한 웹 서버를 생성합니다.
http.createServer((req, res) => {
  if (req.url.startsWith('/user')) { // 클라이언트가 /user 엔드포인트에 요청하는 경우를 처리합니다.
    const url = new URL(req.url, `http://${req.headers.host}`);

    // 쿼리 파라미터에서 ID 값을 가져옵니다.
    const id = url.searchParams.get('ID');

    // 요청한 ID 값을 사용하여 응답을 구성합니다.
    const responseData = {
      id: id,
      name: `User ${id}`,
      email: `user${id}@example.com`
    };

    // JSON 형식으로 응답을 보냅니다.
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify(responseData));
  } else {
    res.statusCode = 404; // 그 외의 요청은 404 Not Found 응답을 보냅니다.
    res.end();
  }
}).listen(3000); // 웹 서버를 3000 포트에서 시작합니다.

console.log('Server running at http://localhost:3000/');

 

 

.then(function (response) { ... })

요청이 성공한 경우 실행되는 콜백 함수입니다. response 객체에는 서버로부터 받은 응답 데이터가 포함됩니다.

.catch(function (error) { ... })

요청이 실패한 경우 실행되는 콜백 함수입니다. error 객체에는 에러에 대한 정보가 포함됩니다.

.then(function () { ... })

항상 실행되는 콜백 함수입니다. 성공 또는 실패 여부와 관계없이 항상 실행됩니다.

async function getUser() { ... }async

키워드를 사용하여 비동기 함수를 선언합니다. await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다.

 

 

 

 

 

Fetch API 는 무엇인가?

 

웹 브라우저에서 제공하는 API로써, 서버와 데이터를 주고 받을 때 사용되는 JavaScript 인터페이스입니다.

Fetch API를 사용하면 HTTP 요청을 쉽게 생성할 수 있으며, 프로미스(Promise) 기반으로 동작하기 때문에 비동기 처리가 간편해집니다.

 

다음은 Fetch API를 사용하여 간단한 GET 요청을 보내고 응답을 받아 처리하는 코드 예제입니다. 
코드 주석과 함께 출력값을 확인해 주세요.

 

// Fetch API -> HTTP GET 요청 보내기

fetch('https://jsonplaceholder.typicode.com/todos/1') // 요청주소
  .then(response => {
      if (!response.ok) { // 오류체크
          throw new Error('오류확인');
      }
      return response.json(); // 정상 반환
  })
  .then(data => {
      console.log(data); // JSON
		JSON 값예제
      // {
      //   "userId": 1,
      //   "id": 1,
      //   "title": "delectus aut autem",
      //   "completed": false
      // }
  })
  .catch(error => {
      console.error('Fetch 오류:', error); // 예외처리
  });