[CS 지식 - 개발 상식] Ajax & axios & fetch

 

•  js에서 비동기 HTTP통신(클라이언트와 서버 간 데이터를 주고받는 것)을 위해 사용 되는 것들

1. Ajax

• Asynchronous JavaScript And XML의 약자
• Javascript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고 받는 기술
  →Javascript에서 비동기 HTTP통신이 가능하도록 해줌
     **비동기 HTTP : response와 request 비동기 식으로 다룰 수 있는 것
• Ajax 프레임 워크 : Ajax를 이용해 개발을 손쉽게 할 수 있도록 여러가지 기능을 포함해 놓은 개발환경
  가장많이 사용되는 프레임 워크 : Prototye, script.aculo.us, dojo, jQuery 

 

2.axios

• 등장배경
   - 기존 비동기 요청 : WEB에서 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체 사용
                               → 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 함
                               → 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어감
   - 기존을 비동기를 보완 → HTTP요청에 최적화 + 추상화↑ api가 생겨남 → 대표적으로 axios, fetch가 있음
• axios : Promise HTTP client for the browser and node.js
              → node.js와 브라우저를 위한 HTTP통신 라이브러리
• 비동기로 HTTP통신을 가능하게 해주며 return을 promise객체로 해주기 때문에 response데이터를 다루기 쉬움
• 장점 - response timeout처리 방법 존재
          - Promise기반으로 만들어졌기 떄문에 데이터 다루기 편리
          - 크로스 브라우징 최적화로 브라우저 호환성이 뛰어남
• 단점 : 사용을 위해 모듈 설치 필요

3.fetch

• ES6부터 JavaScript의 내장 라이브러리로 들어와있음
• promise기반으로 만들어졌기에 Axios와 마찬가지로 데[이터를 다루는데 어렵지 않으며, 내장라이브러리임
• 장점 - JavaScript의 내장 라이브러리이므로 별도 import가 필요 없음
          - Promise기반으로 만들어졌기 때문에 데이터 다루기가 편리
          - 내장라이브러리이기때문에 업데이트에 따른 에러 방지 가능
    **Promise기반 : JavaScript 비동기 처리에 사용되는 객체
• 단점 - 지원하지 않는 브라우저가 존재(IE11등)
          - 네트워크 에러 발생 시 reponse timeout이 없어 기다려야함
          - JSON으로 변화해주는 과정 필요
          - 상대적으로 axios에 비해 기능 부족

Axios	Fetch
모듈 설치 필요	Built-in API로 설치 필요x
wide browser 지원	오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원 polyfill 이용해서 하위 호환성 지원 가능
XSRF Protection 보안 기능 제공	x
자동 JSON 데이터 변환 지원	JSON 데이터 핸들링 위해 추가 절차 필요 Fetch interface의 json()이용하는 로직 추가하여 가능
Request취소, Request Timeout설정 가능	x AbortController이용해 구현가능
HTTP Requests의 intercept 가능	Intercept Requests 제공x Global Fetch Method를 Overwrite하여 나의 인터셉터 정의 가능
Download Progress 지원	Upload Progress 지원 Response Object Body Property통해 제공되는  ReadableStream 인스턴스 이용 가능

 

참고)

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch

[개발상식] Ajax와 Axios 그리고 fetch

http://www.tcpschool.com/ajax/ajax_intro_basic

코딩교육 티씨피스쿨

https://tlsdnjs12.tistory.com/26

fetch와 axios 차이점과 비교