1.jQuery ajax
전통적인 Ajax는 원래 js에 등장한 가장 초기의 백엔드 요청 기술인 XMLHttpRequest(XHR)를 의미하며, 코어는 XMLHttpRequest 객체를 사용합니다.
JQuery ajax는 네이티브 XHR을 캡슐화한 것으로, JSONP 지원을 추가합니다. 수년간의 업데이트와 유지보수 끝에 정말 매우 편리해졌고, 그 장점은 말할 필요도 없습니다; 몇 가지 단점만 나열하려 한다면, 아마도 다음과 같을 수 있습니다:
1. 이는 현재 프론트엔드 MVVM의 흐름에 부합하지 않는 MVC용 프로그래밍입니다
2. 네이티브 XHR 개발을 기반으로 하며, XHR 자체의 아키텍처는 명확하지 않습니다.
3. JQuery 전체 프로젝트가 너무 방대하며, 개인화된 패키징 솔루션을 채택하고 CDN 서비스를 즐기지 않는 것만으로 JQuery를 전부 도입하는 것은 매우 비합리적입니다
4. 관심사 분리 원칙에 부합하지 않는다
5. 구성과 호출이 매우 혼란스럽고, 이벤트 기반 비동기 모델은 친절하지 않습니다.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
아래 그림에서 볼 수 있듯이:
2.axios
Vue2.0 이후, 유유시는 JQuery ajax를 axios로 대체하라고 권유했는데, 이는 많은 사람들의 눈에 Axios를 주목하게 만들었음이 분명합니다.
axios는 브라우저와 nodejs용 약속을 기반으로 한 HTTP 클라이언트로, 본질적으로 네이티브 XHR의 캡슐화이지만, 최신 ES 사양을 준수하는 약속 구현체이며, 다음과 같은 특징을 가지고 있습니다:
1. 브라우저에서 XMLHttpRequest 생성
2. 약속 API 지원
3. 클라이언트 지원이 CSRF를 방지합니다
4. 동시 요청을 위한 일부 인터페이스를 제공한다 (중요하며 훨씬 편리한 작업)
5. node.js에서 HTTP 요청을 생성합니다
6. 요청 및 응답 가로채기
7. 변환 요청 및 응답 데이터
8. 요청 취소
9. JSON 데이터를 자동으로 변환합니다
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. 가져오기
Fetch는 ES6에 등장하고 ES6에서 약속 객체를 사용하는 AJAX의 대안으로 소개됩니다. Fetch는 약속을 기반으로 설계되어 있습니다. Fetch의 코드 구조는 ajax보다 훨씬 단순하고, 매개변수도 jQuery ajax와 비슷합니다. 하지만 꼭 기억하세요fetch는 ajax의 추가 캡슐화가 아니라 네이티브 js이며 XMLHttpRequest 객체를 사용하지 않습니다。
페치의 장점:
1. 초점 분리를 준수하며, 한 객체에서 이벤트로 추적되는 입력, 출력, 상태를 혼합하지 않습니다.
2. 더 나은, 더 편리한 글쓰기 방법
솔직히 위 이유들은 저에게 전혀 설득력이 없어요. Jquery와 Axios가 xhr을 잘 캡슐화하는 데 도움을 주었고 사용하기 쉬운데, 왜 여전히 fetch를 배우는 데 많은 노력을 들여야 하는지도 모르겠어요.
제가 생각하기에 fetch의 주요 장점은 다음과 같습니다:
최근에 fetch를 사용할 때 많은 문제도 겪었습니다:
fetch는 기본 XHR로 생각할 수 있는 저수준 API이기 때문에 사용하기 편하지 않고 캡슐화가 필요합니다.
예를 들어:
1) fetch는 네트워크 요청에 대해서만 오류를 보고하며, 400번과 500번 요청은 성공 요청으로 처리하고, 서버는 400 또는 500번 오류 코드를 반환해도 거부하지 않습니다.
2) fetch는 기본적으로 쿠키를 포함하지 않으며, 구성 항목을 추가해야 합니다: fetch(URL, {credentials: 'include'})
3) fetch는 중단을 지원하지 않고, 타임아웃 제어를 지원하지 않으며, setTimeout과 Promise.reject가 구현한 타임아웃 제어는 요청 프로세스가 백그라운드에서 계속 실행되는 것을 막을 수 없어 트래픽이 낭비됩니다
4) fetch는 요청의 진행 상황을 네이티브로 모니터링할 방법이 없지만, XHR은 가능합니다
|
게시됨 2019. 5. 16. 오후 1:28:28
|
|
|
|
게시됨 2019. 5. 17. 오후 6:16:39
|
집주인