Ajax, Axios, Fetch는 모두 웹 개발에서 HTTP 요청을 만들고 처리하는 데 사용되는 기술이나 라이브러리이지만 각각의 차이점들은 아래와 같습니다:
비동기 처리 방식:
Ajax는 비동기 처리를 위해 콜백 패턴을 사용하므로 코드가 복잡해질 수 있습니다. 이에 반해 Axios와 Fetch는 Promise를 기반으로 하므로 비동기 처리를 보다 간결하게 할 수 있습니다.
요청 취소 기능:
Ajax는 비동기 요청을 취소하는 기능을 제공하지 않습니다. 반면, Axios와 Fetch는 이를 지원합니다.
브라우저 호환성:
Ajax는 브라우저 간 호환성 문제가 있을 수 있습니다. 반면에, Fetch는 현대 브라우저에서 널리 지원되지만, 오래된 브라우저에서는 지원되지 않을 수 있으며, IE는 전혀 지원하지 않습니다. Axios는 브라우저와 Node.js 모두에서 사용할 수 있습니다.
추가 기능:
Axios는 요청과 응답의 인터셉터, 요청 재시도, 클라이언트와 서버 측에서의 예외 처리, JSON 데이터 자동 변환 등과 같은 고급 기능을 제공합니다. 이에 비해, Fetch는 기본적인 기능만 제공합니다.
제공 방식:
Fetch는 브라우저에 기본적으로 내장되어 있어서 별도의 라이브러리 설치 없이 사용할 수 있습니다. 반면, Axios는 별도의 라이브러리로 제공됩니다.
에러 처리:
Fetch는 요청에서 발생하는 HTTP 에러를 기본적으로 reject하지 않습니다. 요청이 성공적으로 완료되었는지 여부와 관계없이 fulfilled 상태의 Promise를 반환합니다. 이 점은 에러 처리 시 주의가 필요합니다.
보안:
Axios는 XSRF(Cross-site Request Forgery) 보호를 지원합니다. 이는 서버로부터 전달받은 특별한 토큰을 쿠키에 저장하고, 이후 요청에서 이 토큰을 함께 보내 서버에서 검증하는 방식으로 XSRF 공격을 방어합니다.