1.jQuery ajax
Traditional Ajax refers to XMLHttpRequest(XHR), the earliest back-end request technology that appeared in the original js, and the core uses the XMLHttpRequest object.
JQuery ajax is an encapsulation of native XHR and adds support for JSONP. After years of update and maintenance, it is really very convenient, and the advantages need not be said; If you insist on listing a few shortcomings, it may only be:
1. It is programming for MVC, which does not conform to the current wave of front-end MVVM
2. Based on native XHR development, the architecture of XHR itself is not clear.
3. The entire JQuery project is too large, and it is very unreasonable to introduce the entire JQuery using ajax alone (adopting a personalized packaging solution and not enjoying CDN services)
4. It does not conform to the principle of separation of concerns
5. The configuration and invocation are very confusing, and the event-based asynchronous model is not friendly.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
As shown in the following figure:
2.axios
After Vue2.0, You Yuxi recommended that you replace JQuery ajax with axios, which must have made axios enter the eyes of many people.
axios is an HTTP client based on promises for browsers and nodejs, which is essentially an encapsulation of native XHR, except that it is an implementation of promises that complies with the latest ES specifications, and it itself has the following characteristics:
1. Create an XMLHttpRequest from your browser
2. Support Promise API
3. Client support prevents CSRF
4. Provide some interfaces for concurrent requests (important, much more convenient operation)
5. Create an HTTP request from node.js
6. Intercept requests and responses
7. Transform request and response data
8. Cancellation of the request
9. Automatically convert JSON data
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3.fetch
Fetch is billed as an alternative to AJAX, which appeared in ES6 and uses the promise object in ES6. Fetch is designed based on promises. Fetch's code structure is much simpler than ajax, and the parameters are a bit like jQuery ajax. However, be sure to rememberfetch is not a further encapsulation of ajax, but native js and does not use the XMLHttpRequest object。
Advantages of fetch:
1. Comply with focus separation, and do not mix inputs, outputs, and states tracked by events in one object
2. Better and more convenient way to write
Frankly, the above reasons are not convincing to me at all, because both Jquery and Axios have helped us encapsulate xhr well enough and are easy enough to use, why do we still have to spend a lot of effort to learn fetch?
I think the main advantages of fetch are:
1. The syntax is concise and more semantic
2. Based on standard promise implementation, support async/await
3. Isomorphic convenience, using [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. More bottom-level, providing rich APIs (request, response)
5. Breaking away from XHR is a new implementation in the ES specification
fetch is a low-level API that you can think of as a native XHR, so it's not that comfortable to use and needs to be encapsulated.
For example:
1) fetch only reports errors for network requests, and treats 400 and 500 as successful requests, and the server will not reject when returning 400 or 500 error codes.
2) fetch does not carry cookies by default, you need to add a configuration item: fetch(url, {credentials: 'include'})
3) fetch does not support abort, does not support timeout control, and the timeout control implemented by setTimeout and Promise.reject cannot prevent the request process from continuing to run in the background, resulting in wasted traffic
4) fetch has no way to natively monitor the progress of requests, while XHR can
|
Posted on 5/16/2019 1:28:28 PM
|
|
|
|
Posted on 5/17/2019 6:16:39 PM
|
Landlord