Ajax와 Fetch는 둘 다 데이터를 얻기 위해 클라이언트에서 서버로 요청을 보내는 데 사용되는 JavaScript의 기술이지만 둘 사이에는 몇 가지 중요한 차이점이 있습니다. 두 기술을 자세히 비교하면 다음과 같습니다.
1. 기술적 기반 및 구현방법
아약스：
베이스: Ajax는 Asynchronous JavaScript and XML(Asynchronous JavaScript and XML)의 약자로 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있는 기술입니다.
실현 방법 : Ajax는 일반적으로 요청 및 응답 처리를 위해 XMLHttpRequest 객체를 사용합니다. 이 메서드의 구문은 상대적으로 복잡하며 콜백 함수 및 상태를 처리하려면 더 많은 코드를 작성해야 합니다.
술책：
베이스: Fetch는 네트워크 요청 처리를 위한 요청 및 응답 개체의 공통 정의를 제공하는 최신 JavaScript의 API입니다.
실현 방법 : Fetch는 Promise 객체를 사용하여 비동기 작업을 처리하고 체인으로 호출할 수 있으므로 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다. Fetch의 API 스타일은 더욱 간결하고 강력합니다.
2. 비동기 처리 및 코딩 스타일
아약스：
비동기 처리: Ajax는 콜백 함수를 사용하여 비동기 작업을 처리하는데, 이로 인해 특히 복잡한 요청 체인에서 콜백 지옥(콜백 지옥) 문제가 발생할 수 있습니다.
코딩 스타일: Ajax의 코딩 스타일은 상대적으로 전통적이며 요청과 응답의 여러 측면을 수동으로 처리해야 합니다.
술책：
비동기 처리 : Fetch는 Promise 객체를 사용하여 비동기 작업을 처리하므로 비동기 요청을 보다 유연하고 간결하게 처리할 수 있습니다. async/await를 사용하면 명확한 비동기 코드를 작성하고 콜백 지옥 문제를 피할 수 있습니다.
코딩 스타일: Fetch의 코드 스타일은 더욱 현대적이고 간결하며 이해 및 유지 관리가 쉽습니다.
3. 도메인 간 요청 및 CORS
아약스：
도메인 간 요청 : Ajax 요청은 다양한 도메인 이름에 걸쳐 있을 수 있지만 CORS(Cross-Origin Resource Sharing) 문제는 적절하게 처리되어야 합니다. Ajax는 JSONP 및 프록시 서버와 같은 기술을 통해 도메인 간 요청을 할 수 있습니다.
술책：
도메인 간 요청 : Fetch는 동일 출처 정책을 따르기 때문에 도메인 간 요청에 대해 더 엄격한 제한을 적용합니다. 도메인 간 요청이 필요한 경우 도메인 간 요청을 허용하려면 서버 측에 적절한 CORS 헤더를 설정해야 합니다. 가져오기 요청은 CORS 문제를 자동으로 처리할 수 있지만 경우에 따라 추가 구성이 필요할 수 있습니다.
4. 기타 기능
아약스：
유연성: Ajax는 요청 헤더, 요청 본문, 응답 형식 등을 사용자 정의할 수 있어 높은 유연성을 제공합니다.
호환성: Ajax는 이전 버전의 브라우저에서 호환성 문제가 있을 수 있지만, 최신 브라우저의 인기로 인해 이 문제는 크게 개선되었습니다.
술책：
시간 초과 처리 기능 제공: 가져오기는 요청 시간이 초과된 후 요청을 자동으로 중단하여 오랜 대기를 방지합니다.
응답 처리: Fetch는 .json(), .text(), .blob() 등 응답 데이터를 처리하는 다양한 메서드를 제공하여 응답 데이터 처리를 더욱 편리하게 만듭니다.
용법
fetch 이는 JavaScript로 된 현대적이고 강력한 네트워크 요청 API로, 네트워크 전체에서 비동기적으로 리소스를 얻는 간단하고 논리적인 방법을 제공합니다.fetch 반환Promise , JavaScript의 async/await 구문과 함께 사용하기 쉽습니다. 다음은 몇 가지 기본 사용 예입니다.
