This is the 18th day of my participation in the August Challenge
Jiangshan generation of talent, each leading for hundreds of years.
preface
Hello, everyone, I am the author of programming Samadhi hermit King, a small front-end.
Since yesterday posted “still addicted to Ajax? That can be out!” After the article, I received some comments from some of you, the comments are very heart, also very deep.
To be honest, although I tried my best to reply to your questions, I still had some ambiguous understanding of some concepts. Fortunately, I got advice from my colleagues, such as:
Thank you for your generous advice, let me in the growth of the road and forward a few points.
To sum up, the main issues involved in the comments section are as follows:
- What is the relationship between Fetch and Axios/Ajax
- Will Fetch really replace Ajax
- Is there a recommendation for a well-packaged Fetch library
In order to live up to your enthusiasm, I will try to explain these problems here, if there are omissions, please forgive me!
Concepts and features
First, let’s take a look at the concepts of Ajax, Axios, and Fetch.
Ajax
Asynchronous JavaScript + XML (Asynchronous JavaScript + XML)
It describes a “new” approach that uses a collection of existing technologies, mainly HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly XMLHttpRequest.
When using an AJAX model that combines these technologies, web applications can quickly render incremental updates to the user interface without reloading (refreshing) the entire page. This allows the program to respond more quickly to user actions.
Ajax is a conceptual model, a collection of existing technologies, not a specific technology.
The most important feature of Ajax is the ability to partially refresh the page.
Axios
Axios is a Promise based web request library that works with Node.js and browsers. It is isomorphic (that is, the same set of code can run in the browser and node.js). It uses the native Node.js HTTP module on the server side and XMLHttpRequest on the client side.
Here we will focus on the client side, Axios, which is a tool library that is rewrapped based on XHR.
The main features of Axios client are:
- Create XMLHttpRequests from the browser
- Supporting Promise API
- Intercept requests and responses
- Transform request and response data
- Cancel the request
- Automatically convert JSON data
- The client supports XSRF defense
Fetch
Fetch provides an interface to Fetch resources (including cross-domain requests).
Fetch is a modern concept, equivalent to XMLHttpRequest. It provides much of the same functionality as XMLHttpRequest, but is designed to be more extensible and efficient.
The core of Fetch lies in the abstraction of HTTP interfaces, including Request, Response, Headers, and Body, as well as the Global Fetch used to initiate asynchronous requests. Thanks to JavaScript’s implementation of these abstracted HTTP modules, other interfaces can easily use these capabilities.
In addition, Fetch takes advantage of the asynchronous nature of requests — it’s based on promises.
The fetch() method must take one parameter — the path to the resource. Whether the request succeeds or fails, it returns a Promise object, resolve corresponding to the Response of the request.
Fetch and Axios/Ajax relationship
From the above explanation of the three concepts, we should have a general idea of the relationship between them. Let me use a picture here:
For the above picture, LET me explain:
- Ajax is a model (technology set) that represents asynchronous JavaScript + XML, so Fetch is also a subset of Ajax
- Before, Ajax was a collection of xHR-centric technologies by default. With Fetch, Ajax no longer just refers to XHR. We refer to XHR-centric Ajax technologies as traditional Ajax.
- Axios is a subset of traditional Ajax (XHR) because it is encapsulated based on XHR.
Will Fetch really replace Ajax?
A more accurate way to ask this question is: Will Fetch really replace traditional Ajax (XHR)?
To answer this question, we need to be clear about the following:
- Asynchronous programming is a big trend in JavaScript, and most browsers already support the standard Promise.
- The Fetch API is native to the browser and is based on standard Promises.
- As anyone who has written remote XHR will know, the traditional Ajax native approach is messy and does not conform to the principle of separation of concerns.
- Axios is an XHR-wrapped Promise request library that is really easy to use.
Based on the above points, my view is that Fetch will eventually replace traditional Ajax, but it may take a long time.
While traditional Ajax (Axios and the like) currently far outstrips Fetch in terms of scale of use, keep in mind that this is the cumulative effect of XHR over a decade.
Packaged Axios is far better than native XHR in terms of ease of use, but it is packaged after all. Compared with native Fetch, Axios is slightly worse in terms of ease of use, and the native API naturally supports more functions and is more flexible in use.
Fetch tool library recommendation
conclusion
The above is a brief explanation of Fetch and Ajax issues that I hope will inspire you.
Personally, I’m looking forward to Fetch replacing traditional Ajax. The technology needs to be refreshed and I have a few more decades of work ahead of me. I don’t want the front-end technology to be stuck in a rut.
~
Thanks for reading!
~
Learn interesting knowledge, meet interesting friends, shape interesting soul!
Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!
You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!
Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!