Web programming has evolved rapidly in recent years, and the ability to interact with external APIs has become essential for web developers. JavaScript, being one of the most popular programming languages, offers a powerful and easy-to-use tool for this purpose: the Fetch API. This API allows you to make requests to external resources in a much simpler and more modern way, compared to previous techniques such as XMLHttpRequest.
What is the Fetch API?
The Fetch API is a JavaScript interface that allows HTTP requests to be made to servers, including sending and receiving resources. Unlike older forms, Fetch provides a more powerful and flexible way to manage requests and responses. It is promise based, meaning it uses promises to handle asynchronous results, allowing you to write cleaner, more readable code.
Getting started with Fetch API
To get started using the Fetch API, you first need to understand how to make a basic request. The syntax is simple:
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console. error('Error:', error));In this example, fetch is called with the URL of the resource you want to obtain. The function then is used to handle the response once the promise is resolved. The first function then converts the response to JSON, and the second prints the data to the console. catch captures any errors that may occur during data request or processing.
Managing Different Types of Data
Fetch is not limited to handling only JSON. You can work with other formats such as plain text, FormData, Blob, among others. Here I show you how you can handle different types of responses:
Plane text
fetch('https://api.example.com/text') .then(response => response.text()) .then(text => console.log(text)) .catch(error => console. error('Error:', error));FormData
fetch('https://api.example.com/formdata') .then(response => response.formData()) .then(formData => console.log(formData)) .catch(error => console. error('Error:', error));Blob (for binary files like images or PDF)
fetch('https://api.example.com/image') .then(response => response.blob()) .then(blob => { const imageUrl = URL.createObjectURL(blob); console.log( imageUrl); }) .catch(error => console.error('Error:', error));Advanced Requests with Options
Fetch allows you to send more complex requests, such as POST, PUT, DELETE, etc., by using a second parameter that allows you to configure the request:
fetch('https://api.example.com/posts', { method: 'POST', // or 'PUT' headers: { 'Content-Type': 'application/json& #039;, } , body: JSON.stringify({ title: 'Hello World', body: 'This is a post about Fetch API', userId: 1, }) }) .then(response => response.json()) . then(data => console.log(data)) .catch(error => console.error('Error:', error));This code snippet specifies the HTTP method to use, necessary headers, and the body of the request, which in this case is a JSON converted to a text string.
Errors and Exceptions
Handling errors correctly is crucial. Fetch will not reject a promise if the server responds with an HTTP error (such as 404 or 500). It will only be rejected if the request could not be made due to some type of network failure. To handle HTTP errors, you can add a check before processing the data:
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response. json(); }) .catch(error => console.error('Error:', error));Conclusions
The Fetch API in JavaScript is an essential tool for modern web developers, providing a clear and efficient way to make requests to external resources. For more information on web development and related technologies, be sure to visit my blog where I regularly share guides, tutorials and tips on different aspects of web development.
If you have questions or need help, don't hesitate to contact me. Happy coding!
English 
Spanish