2020-05-24——Ajax, axios 및 fetch의 차이점

1.jquery 아약스

$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, Success: function () {}, error: function () {}});<br>

전통적인 Ajax는 XMLHttpRequest를 참조합니다. (XHR)은 백엔드 요청을 보내는 최초의 기술이며, 코어는 XMLHttpRequest 객체를 사용합니다. 여러 요청 사이에 순차적인 관계가 있으면 콜백 지옥이 발생합니다.

JQuery ajax는 기본 XHR의 캡슐화이며 JSONP에 대한 지원도 추가합니다. 수년간의 업데이트와 유지 관리 후에는 장점은 말할 것도 없이 다음과 같습니다.
1. MVC용으로 설계되었으며 현재 버전과 일치하지 않습니다. end MVVM.Inspur
2. 기본 XHR 개발을 기반으로 XHR 자체의 구조가 명확하지 않습니다.
3. JQuery 프로젝트 전체가 너무 크고, 단지 ajax만을 사용하기 위해 JQuery 전체를 도입하는 것은 매우 불합리합니다. (개인화된 패키징 솔루션을 채택하고 있으며 CDN 서비스를 즐길 수 없습니다.)
4. of Concerns (Separation of Concerns)
5 .구성 및 호출 방법이 매우 혼란스럽고 이벤트 기반 비동기 모델이 친숙하지 않습니다.

PS: MVVM(Model-View-ViewModel)은 클래식 MVC(모델-뷰-컨트롤러) 패턴에서 파생되었습니다. MVVM의 출현으로 GUI 프런트엔드 개발과 백엔드 비즈니스 로직의 분리가 촉진되어 프런트엔드 개발 효율성이 크게 향상되었습니다. MVVM의 핵심은 데이터를 보다 쉽게 ​​관리하고 사용할 수 있도록 모델의 데이터 개체를 변환하는 전송 스테이션(값 변환기)과 같은 ViewModel 계층입니다. 뷰 레이어와 하위 레이어는 데이터에 대한 인터페이스 요청을 통해 모델 레이어와 상호 작용하며, 이는 상위 레이어와 하위 레이어 사이의 연결 역할을 합니다. View 레이어는 Model 레이어의 데이터가 아니라 ViewModel의 데이터를 표시합니다. ViewModel은 View 레이어와 Model 레이어를 완전히 분리하는 역할을 합니다. 그리고 백엔드 계획 실행에서 가장 중요한 부분입니다.

2、액시오스

axios({ 메소드: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }}).then(function (response) { console.log(response); }).catch(function (error) { console.log(error);});<br>

Vue2.0 이후 Yuxi는 모든 사람들에게 Axios를 사용하여 JQuery ajax를 대체할 것을 권장했습니다. 많은 사람들.
axios는 브라우저 및 nodejs용 Promise 기반 HTTP 클라이언트입니다. Promise의 구현 버전이고 최신 ES 사양을 준수한다는 점을 제외하면 기본적으로 기본 XHR이 캡슐화되어 있습니다.
1. 브라우저의 XMLHttpRequest 지원 Promise API
3. 클라이언트는 CSRF 방지를 지원합니다
4. 동시 요청을 위한 일부 인터페이스를 제공합니다(중요, 많은 작업을 용이하게 함)
5. node.js에서 HTTP 요청 생성 요청 및 응답 <br> 7. 요청 및 응답 데이터 변환 <br> 8. 요청 취소 <br> 9. JSON 데이터 자동 변환

PS: CSRF 방지: 각 요청에 쿠키에서 얻은 키를 전달하도록 하세요. 브라우저의 동일 출처에 따라 정책에 따라 가짜 웹사이트는 쿠키에서 키를 얻을 수 없습니다. 이러한 방식으로 백엔드는 요청이 가짜 웹사이트에서 사용자의 오해의 소지가 있는 입력인지 쉽게 식별하여 올바른 전략을 채택할 수 있습니다.

3.가져오기

try { let response = wait fetch(url); let data = response.json();} catch(e) { console.log("죄송합니다, 오류", e);}

<br> Fetch는 AJAX를 대체하는 것으로 알려져 있으며 ES6에서 등장했으며 ES6에서는 Promise 객체를 사용합니다. Fetch는 약속을 기반으로 설계되었습니다. Fetch의 코드 구조는 ajax보다 훨씬 간단하고 매개변수는 jQuery ajax와 약간 비슷합니다. 그러나 가져오기는 ajax의 추가 캡슐화가 아니라 XMLHttpRequest 객체를 사용하지 않는 기본 js라는 점을 기억해야 합니다.

가져오기의 장점:

1. 관심사 분리를 준수하며 입력, 출력 및 이벤트에 의해 추적되는 상태를 하나의 개체에 혼합하지 않습니다.
2. 더 좋고 편리한 작성 방법
솔직히 위의 이유는 완전히 다릅니다. 나에게 그것은 설득력이 없습니다. 왜냐하면 Jquery와 Axios는 xhr을 충분히 캡슐화하는 데 도움이 되었고 사용하기에 충분히 편리하기 때문입니다. 왜 우리는 가져오기를 배우기 위해 여전히 많은 노력을 기울여야 할까요?
가져오기의 주요 장점은 다음과 같습니다.

1. 간단한 구문, 더 많은 의미 2. 표준 Promise 구현을 기반으로 async/await3을 지원하고, [isomorphic-fetch](https://github.com)를 사용합니다. /matthew-andrews/isomorphic-fetch) 4. 보다 낮은 레벨이며 풍부한 API(요청, 응답)를 제공합니다. 5. XHR과 분리되어 ES 사양의 새로운 구현 방법입니다

위 내용은 2020-05-24——Ajax, axios 및 fetch의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!