岁月流转，英才辈出，各展风采，影响深远。
Salutations, esteemed readers, I am Yin Yi Wang, the creator of Programming Three Refinements, a modest front-end developer.
Following the publication of my article titled 《Still Grasping Ajax? That’s Outdated!》yesterday, I have received numerous comments from you all, each one heartfelt and profoundly insightful.
Frankly, while I strive to respond to everyone’s inquiries to the best of my ability, there are inevitably instances where my explanations of certain concepts remain somewhat ambiguous. Fortunately, I have been guided by my peers, such as:
Thank you all for your invaluable teachings, which have propelled me forward on my journey of growth.
Let me summarize the primary issues raised in the comments section:
- What is the relationship between Fetch and Axios/Ajax?
- Will Fetch truly replace Ajax?
- Are there any well-encapsulated Fetch utility libraries recommended?
To honor your enthusiasm, I will attempt to clarify these questions here. If there are any oversights, please bear with me!
First, let us understand the concepts of Ajax, Axios, and Fetch individually.
The full English term is Asynchronous JavaScript + XML, which translates to Asynchronous JavaScript and XML.
It describes a “new” method that utilizes an existing set of technologies, primarily involving: HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly, XMLHttpRequest.
When employing the AJAX model that combines these technologies, web applications can rapidly present incremental updates on the user interface without reloading (refreshing) the entire page. This enables the program to respond more quickly to user interactions.
Ajax is a conceptual model, a collection of various existing technologies, and does not specifically refer to any single technology.
The most important characteristic of Ajax is its ability to partially refresh the page.
Axios is a Promise-based network request library that operates in both Node.js and browsers. It is isomorphic (meaning the same code can run in both browsers and Node.js). On the server side, it uses the native Node.js http module, while on the client side, it uses XMLHttpRequest.
Here, we will focus solely on the client-side Axios, as it is a tool library formed by encapsulating XHR.
The main features of client-side Axios include:
- Creating XMLHttpRequests from the browser
- Supporting the Promise API
- Intercepting requests and responses
- Transforming request and response data
- Canceling requests
- Automatically converting JSON data
- Client-side support for defending against XSRF
Fetch provides an interface for retrieving resources (including cross-origin requests).
Fetch is a modern concept, equivalent to XMLHttpRequest. It offers many of the same functionalities as XMLHttpRequest but is designed to be more extensible and efficient.
The core of Fetch lies in its abstraction of HTTP interfaces, including Request, Response, Headers, and Body, as well as the global fetch used to initialize asynchronous requests. Thanks to these well-abstracted HTTP modules implemented in JavaScript, other interfaces can easily utilize these functionalities.
Additionally, Fetch leverages the asynchronous nature of requests—it is based on Promise.
fetch() must accept a parameter—the path to the resource. Regardless of whether the request is successful or not, it returns a Promise object, with the resolved value corresponding to the request’s Response.
Based on the above explanations of the three concepts, we should have a general understanding of their relationships. I will illustrate this with a diagram here:
Regarding the diagram, let me explain:
- Ajax is a model representing Asynchronous JavaScript + XML (a collection of technologies), so Fetch is also a subset of Ajax
- Previously, when we referred to Ajax, it typically meant a technology stack centered around XHR. With the advent of Fetch, Ajax no longer solely refers to XHR. We now refer to Ajax centered around XHR as traditional Ajax.
- Axios belongs to traditional Ajax (XHR) as a subset, because it is based on XHR for encapsulation.
Actually, the more accurate question here would be: Will Fetch truly replace traditional Ajax (XHR)?
To answer this question, we need to understand the following points:
- Asynchronous programming is a major trend in JavaScript development, and the vast majority of browsers now support the standard Promise.
- Fetch API is a built-in browser API and is based on the standard Promise.
- The native syntax of traditional Ajax is relatively chaotic and does not adhere to the principle of separation of concerns. Those who have written remote XHR should have a deep understanding of this.
- Axios is a Promise-based request library encapsulated on top of XHR, and it is indeed convenient to use.
Based on the above points, my view is that Fetch will eventually replace traditional Ajax, but the process may be relatively lengthy.
Although, it is true that traditional Ajax (such as Axios and similar libraries) currently far exceeds Fetch in terms of usage scale, it is important to note that this is the result of over a decade of accumulation by XHR.
The well-encapsulated Axios has surpassed native XHR in ease of use by a wide margin, but it is after all a封装, and compared to native Fetch, Axios is already at a disadvantage from the start. Moreover, the native API inherently supports more functionalities and offers greater flexibility in usage.
In the comments section of yesterday’s article, a fellow recommended a Fetch utility library called Mande. For those interested, you may want to check it out.
This is a brief explanation addressing the questions about Fetch and Ajax. I hope it brings some inspiration to all of you.
Personally, I am quite looking forward to Fetch replacing traditional Ajax. Technological development requires continuous vitality. I still have decades left to work, and I certainly don’t want front-end technology to stagnate—that would be so boring!
~
~The end of this article, thank you for reading!
~
Learning interesting knowledge, meeting interesting friends, and shaping an interesting soul!
Hi everyone, I am the author of Programming Three Refinements, Yin Yi Wang, and my official account is『Programming Three Refinements』. Welcome to follow, and I hope you will give me your guidance!
When you come, you come with expectations, and I welcome you with the fragrance of ink! When you leave, whether it’s success or failure, I will leave you with the lingering charm!
Knowledge and skills are equally important, internal and external skills must be practiced, theory and practice must be grasped in both hands!