Make writing a habit together! This is the fourth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

preface

Front-end development partners must be inseparable from the “request” two words, which is the most important way for us to interact with the back-end! In a few years ago, one of the questions that interviewers like to ask is to ask interviewees to implement Ajax by tearing the code by hand. I believe many of you must have encountered it. Today, many new terms have been used to describe requests.

What these nouns have in common: They are used to send network requests.

1.Ajax

Its full name is Asynchronous JavaScript And XML, which translates to “Asynchronous JavaScript And XML”.

Many people may think that Ajax is a way to make requests, or equate XMLHttpRequest with Ajax, but this is wrong and one-sided.

Truth:

Ajax is a technology umbrella, a conceptual model that encompasses many technologies, not any one in particular, but one of its most important features is the ability to refresh pages locally.

Features:

  • Partially refresh the page without reloading the entire page.

In short, Ajax is an idea, and XMLHttpRequest is just a way to implement Ajax. The XMLHttpRequest module is a great way to implement Ajax, and it’s one of the many pieces of code that interviewers like to tear apart.

Use the XMLHttpRequest module to implement Ajax.

Sample code:

<body> <script> function ajax(url) { const xhr = new XMLHttpRequest(); xhr.open("get", url, false); Xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {if (xhr.status === 200) { Console. info(" response result ", xhr.response)}}} xhr.send(null); } ajax('https://smallpig.site/api/category/getCategory') </script> </body>Copy the code

Output result:

The XMLHttpRequest module is used to implement one of the simplest GET network requests.

Note: When we implemented network requests in this way, the callback hell would occur if the request was repeated within the request, which was another problem, but later led to more elegant requests.

2.Fetch

Fetch was introduced in ES6, using promise objects that ES6 raised. It is an alternative to XMLHttpRequest.

A lot of people compare it to Ajax, but that’s not true, because when we’re talking about Ajax, we’re talking about Ajax using XMLHttpRequest, so we should really compare it to XMLHttpRequest.

Truth:

Fetch is an API, it’s real, it’s based on Promise.

Features:

  • Use promise, not the callback function.
  • Adopt modular design, such as REP, RES and other objects scattered, more friendly.
  • You can improve web site performance by processing data through data flow objects.

So this is very different from Ajax, one is the idea, the other is a real API, but they are used to service the network request, let’s take a look at using Fetch to implement the network request.

Sample code:

<body>
  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://smallpig.site/api/category/getCategory')
  </script>
</body>
Copy the code

Output result:

The last code uses Fetch to send the simplest GET request. One of the most important features of Fetch is the use of.then chain calls to process the result, which not only makes the code readable, but also solves the problem of callback hell.

3.Axios

Axios became widely used with the rise of Vue, and today the vast majority of web requests in Vue projects are initiated using Axios. Of course it’s not an idea, or a native API, it’s a wrapper library.

Truth:

Axios is a promise-wrapped network request library that is rewrapped based on XHR.

Features:

  • Create XMLHttpRequests from the browser
  • Create HTTP requests from Node.js
  • Supporting Promise API
  • Intercept requests and responses
  • Transform request data and response data
  • Cancel the request
  • Automatically convert JSON data
  • The client supports XSRF defense

So Axios is a subset of XHR, which in turn is a subset of Ajax. Since it is a library, we need to introduce it when we use it.

Sample code:

// POST request axios({method: 'POST ', url: '/user/12345', data: {firstName: 'Fred', lastName: 'Flintstone'}})Copy the code

conclusion

The relationship among Ajax, Fetch and AXIos can be clearly represented by a graph, as shown in the following figure:

Compare the three:

Network request The characteristics of
Ajax A general term for a technology that uses XHR to implement network requests
Fetch Specific apis, based on promises, implement network requests
Axios A wrapper library, based on XHR wrapper, more recommended use