Author：Hong1
Link：https://juejin.cn/post/7381456484427628570
In front-end development, handling HTTP requests is a common and important task. JavaScript provides several ways to send network requests, with the two most popular methods being the Fetch API and Axios. Although both can accomplish the same task of sending requests from the client to the server and receiving responses, they each have their own strengths and weaknesses in terms of usage, functionality, and flexibility. Let’s take a brief look at them.
1. Basic Introduction
Fetch API
Fetch API[1] is a standard JavaScript API built into modern browsers for handling HTTP requests. It is a modern replacement for XMLHttpRequest, providing a more powerful and flexible way to operate. Fetch provides a global <span>fetch()</span> function that makes it very convenient to handle HTTP requests such as GET and POST. Fetch returns a Promise object, which makes it easy to use for asynchronous operations.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Axios
Axios[2] is a Promise-based HTTP client for both browsers and Node.js. It is a third-party library, so it needs to be installed via npm. Axios offers some additional features and advantages, such as automatic JSON data transformation and client-side support for XSRF protection.
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
2. Feature Comparison
Error Handling
Fetch and Axios have some differences in error handling. When using Fetch, even if the server returns an HTTP[3] error status code, it will not automatically trigger a catch. Fetch is only considered rejected in the case of network failure or request blockage.
In contrast, Axios will automatically trigger a catch when the received response status code falls outside the 2xx range.
Response Data
Fetch does not automatically parse the data returned from the server as JSON; you need to manually call the <span>.json()</span> method to convert it. Axios, on the other hand, automatically converts all data returned from the server to JSON[4], requiring no additional operations.
Browser Compatibility
Fetch is not natively supported in older browsers (like IE11) and requires a polyfill for compatibility. Axios, being an independent library, can be used in all browsers that support Promises.
3. Usage Recommendations
Use Axios when:
- You need broad browser support, including older versions.
- Your project requires handling a large number of HTTP requests and needs richer configuration options and simplified error handling.
- You need to use request and response interceptors to provide additional functionality.
Use Fetch when:
- Your project does not need to support older browsers, or you can accept using polyfills.
- You prefer to use the built-in API of modern browsers without additional dependencies.
- Your requests are relatively simple and do not require complex configuration.
4. How to Generate Axios/Fetch Code
We can automatically create Axios code for making HTTP requests using Apifox[5].
Conclusion
Both Axios and fetch() are powerful and reliable methods for making HTTP requests in JavaScript. You can choose the one that best fits your project and style, or even use both for different purposes. The important thing is to understand how they work and how to use them effectively.