2020-05-24——The difference between ajax, axios and fetch

1、jquery ajax

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

Traditional Ajax refers to XMLHttpRequest (XHR), the earliest technology for sending back-end requests, which belongs to the original js. The core uses the XMLHttpRequest object. If there is a sequential relationship between multiple requests, callback hell will occur.

JQuery ajax is an encapsulation of native XHR. In addition, it also adds support for JSONP. After years of updates and maintenance, it is really very convenient. Needless to say the advantages; if I had to list a few disadvantages, they might only be:
1. It is designed for MVC programming and does not conform to the current front-end. The wave of MVVM
2. Based on native XHR development, the architecture of XHR itself is not clear.
3. The entire JQuery project is too big, and it is very unreasonable to introduce the entire JQuery just to use ajax (it adopts a personalized packaging solution and cannot enjoy CDN services)
4. It does not comply with the separation of concerns (Separation of Concerns) Principle
5. The configuration and calling methods are very confusing, and the event-based asynchronous model is unfriendly.

PS: MVVM (Model-View-ViewModel), derived from the classic Model–View–Controller (MVC) pattern. The emergence of MVVM promotes the separation of GUI front-end development and back-end business logic, greatly improving front-end development efficiency. The core of MVVM is the ViewModel layer, which is like a transfer station (value converter), responsible for converting the data objects in the Model to make the data easier to manage and use. This layer performs two-way data binding upwards with the view layer and to The lower layer interacts with the Model layer through interface requests for data, which serves as a link between the upper and lower layers. The View layer displays not the data of the Model layer, but the data of the ViewModel. The ViewModel is responsible for interacting with the Model layer. This completely decouples the View layer and the Model layer. This decoupling is crucial. It separates the front and back ends. The most important part of the implementation of the plan.

2、axios

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

After Vue2.0, You Yuxi recommends everyone to use axios to replace JQuery ajax, which will definitely help axios has caught the attention of many people.
axios is an HTTP client based on Promise for browsers and nodejs. It is essentially an encapsulation of native XHR. However, it is an implementation version of Promise and complies with the latest ES specifications. It has the following characteristics:
1. Create XMLHttpRequest from the browser
2. Support Promise API
3. The client supports preventing CSRF
4. Provides some concurrent request interfaces (important, facilitates many operations)
5. Create http request from node.js
6. Intercept request and response
7. Convert request and response data
8. Cancel request
9. Automatically convert JSON data

PS: Preventing CSRF: Let each of your requests carry a key obtained from the cookie. According to the browser's same-origin policy, the fake website cannot obtain the key from your cookie. In this way, the background You can easily tell if the request is misleading input from a user on a fake website, so you can take the right strategy.

3、fetch

try { let response = await fetch(url); let data = response.json(); console.log(data);} catch(e) { console.log("Oops, error", e);}<br>

fetch is known as a replacement for AJAX. It appeared in ES6 and uses the promise object in ES6. Fetch is designed based on promises. The code structure of Fetch is much simpler than ajax, and the parameters are a bit like jQuery ajax. However, you must remember that fetch is not a further encapsulation of ajax, but native js, which does not use the XMLHttpRequest object.
Advantages of fetch:
1. It conforms to the separation of concerns and does not mix input, output and status tracked by events in one object.
2. Better and more convenient writing method
Frankly speaking, The above reasons are not convincing to me at all, because both Jquery and Axios have helped us encapsulate xhr well enough and it is convenient 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. Simple syntax, more semantic 2. Based on standard Promise implementation, supporting async/await3. Isomorphic and convenient, use [isomorphic-fetch](https ://github.com/matthew-andrews/isomorphic-fetch) 4. It is lower level and provides rich APIs (request, response) 5. It is separated from XHR and is a new implementation method in the ES specification

The above is the detailed content of 2020-05-24——The difference between ajax, axios and fetch. For more information, please follow other related articles on the PHP Chinese website!