Introduction to Ajax, FETCH, and Axios

1.1, ajax

Ajax is the first technology to send back-end requests and belongs to native JS. Ajax use source code, please click “native Ajax request details” view. Before we use them, we need to wrap them up and use them. Take jQuery ajax as an example.

The ajax wrapper is as follows:

const $ = {}; $.ajax = (obj)=>{ var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } if (xhr) { xhr.onreadystatechange = () =>{ if (xhr.readyState === 4) { if (xhr.status === 200) { obj.success(xhr.responseText); Failcallback obj. Error ('There was a problem with the request.'); } } else { console.log('still not ready... '); }}; xhr.open(obj.method, obj.url, true); // Set content-type to application/x-www-form-urlencoded // Transfer data in form xhr.setRequestHeader(' content-type ', 'application/x-www-form-urlencoded'); xhr.send(util(obj.data)); Const util = (obj)=>{var STR = "for (key in obj){STR += key +'='+obj[key]+'&'} return str.substring(0,str.length-1) } }Copy the code

When you start using it, you’ll notice that the body and header are a bit messy, and there’s callback hell, so we have a new fetch request technique.

1.2, the fetch

Fetch first solves the problem of callback hell by returning a Promise object that is not familiar with promises and can be clicked on Promise Details.

Fetch uses the following:

fetch(url,options).then(response=>{
// handle HTTP response
},error=>{
// handle network error
})
Copy the code

Fetch can transfer any data format when sending network requests, which is very simple. However, the timeout and termination cancellation of fetch are not convenient and can only be accomplished by canceling the Promise. If there are multiple FETCH requests, it will be more difficult to handle. In addition, FETCH is a relatively new technology with poor support from older browsers and Internet Explorer.

1.3, axios

Axios is very powerful, including cancellation requests, timeout handling, progress handling, and more. But it’s still Ajax in nature, wrapped around Promise, which solves callback hell and works well across browsers.

Axios uses the following code:

axios.post('/user', {
 firstName: 'Fred',
 lastName: 'Flintstone'
})
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});
Copy the code

Second, advantages and disadvantages of Ajax, FETCH and AXIos

2.1 Advantages and disadvantages of Ajax:

  • Js native, based on XHR development, XHR structure is not clear.
  • For MVC programming, due to the recent rise of VUE and React, it does not conform to the MVVM front-end development process.
  • The core of ajax encapsulation is the use of XMLHttpRequest objects, which can create callback hell if you use them too much and sequentially.

2.2 Advantages and disadvantages of FETCH:

  • Native JS, separate from XHR and touted as an alternative to Ajax technology.
  • Designed based on the Promise object, it solves the callback hell problem.
  • Provides a rich API, the use of simple structure.
  • The cookie is not configured by default.
  • There is no way to detect the progress of the request, cancel or time out processing.
  • The return result is a Promise object. There are multiple methods to obtain the result. Data types have corresponding methods to obtain the result.
  • Browser support is poor.

2.3 Advantages and disadvantages of AXIOS

  • Create an XMLHttpRequest request in the browser and an HTTP request in Node.js.
  • Fix the callback hell problem.
  • Automatically converts to JSON data type.
  • Support Promise technology and provide concurrent request interface.
  • Progress can be detected through network requests.
  • Provides timeout handling.
  • Browser compatibility is good.
  • There are interceptors that handle requests and responses uniformly.