1.jQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});
Copy the code

Traditional Ajax refers to XMLHttpRequest (XHR), the earliest technology to send back-end requests, which belongs to the original JS. The core uses XMLHttpRequest objects. If multiple requests are sequential, callback hell can occur. JQuery Ajax is a wrapper around native XHR with additional SUPPORT for JSONP. After years of maintenance, it is really very convenient, the advantages need not say much; If I had to name a few shortcomings, they might only be: 1. It is for MVC programming, not in line with the current wave of front-end MVVM 2. Based on native XHR development, the architecture of XHR itself is unclear. 3. The whole project of JQuery is too large, and it is unreasonable to introduce the whole JQuery using Ajax alone (personalized package solution cannot enjoy CDN service) 4. Does not comply with the principle of Separation of Concerns 5. Configuration and invocation are messy, 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 the efficiency of front-end development. The core of MVVM is the ViewModel layer, which is like a value Converter. It is responsible for transforming the data objects in the Model to make the data easier to manage and use. This layer is two-way data binding with the view layer. Down to the Model layer through the interface request for data interaction, play the role of up and down. The View layer is not the Model layer data, but the ViewModel data, the ViewModel is responsible for the interaction with the Model layer, which completely decouples the View layer and the Model layer, this decoupling is crucial, it is the most important part of the implementation of the front end separation scheme. As shown below:

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);
});
Copy the code

After Vue2.0, You recommended using Axios instead of JQuery Ajax, which surely put Axios on a lot of people’s minds. Axios is an HTTP client based on Promise for browsers and NodeJS. It is essentially a wrapper around native XHR, but it is an implementation version of Promise that complies with the latest ES specification and has the following characteristics: 1. Create XMLHttpRequest 2 from the browser. Support the Promise API 3. Client support to prevent CSRF 4. Provides some interfaces for concurrent requests (important to facilitate many operations) 5. Create HTTP requests from Node.js 6. Intercept requests and responses 7. PS: prevent CSRF: make every request with a key obtained from the cookie. According to the same origin policy of the browser, the fake website cannot obtain the key obtained from the cookie. The backend can easily tell if the request is a misleading input from a user on a fake site and adopt 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);
}
Copy the code

Fetch, billed as an alternative to AJAX, was introduced in ES6, using promise objects in ES6. Fetch is designed based on Promise. Fetch’s code structure is much simpler than Ajax, and the parameters are a bit like jQuery Ajax. However, keep in mind that FETCH is not a further encapsulation of Ajax, but rather native JS that does not use XMLHttpRequest objects. Fetch has the following advantages: 1. It conforms to the separation of concerns and does not mix the input, output and state tracked by events in one object. 2. Frankly speaking, the above argument is not convincing to me at all, because both Jquery and Axios have helped us package XHR well enough and make it easy to use. Why should we bother to learn fetch? In my opinion, the main advantages of FETCH are:

1. Concise syntax, more semantic 2. Based on standard Promise implementation, support async/await 3. Isomorphism is convenient, use [isomorphic - fetch] (https://github.com/matthew-andrews/isomorphic-fetch). More low-level, the API is rich (Request, response) 5. XHR is a new implementation in the ES specificationCopy the code

Fetch is a low-level API that you can think of as native XHR, so it’s not very comfortable to use and needs to be wrapped. Such as:

1) Fetch only reports errors for network requests. 400,500 requests are regarded as successful requests. When the server returns 400,500 error codes, fetch will not be rejected. 2) Fetch does not carry cookies by default, so you need to add configuration items: fetch(URL, {credentials: 'include'}) 3) FETCH does not support abort and does not support timeout control. The timeout control implemented by setTimeout and Promise.reject does not prevent the request process from continuing in the background, resulting in a waste of traffic. The XHR canCopy the code

Bottom line: Axios provides concurrent encapsulation without the problems of FETCH, and is small enough to be the preferred method of request.