👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!
In this guide, we will discuss what the Recovery API is and how to make web requests using the "API." We will talk about two examples:. A GET request and a POST request
What is the Fetch API
While this tool was effective, it was also very chatty and complicated to use. Fetch, on the other hand, is a new alternative that makes it easier to make web requests.
The fetch API is supported in all modern browsers. This means that once you learn how to use it, you won’t have to worry about browser compatibility when making web requests.
How to do a GET request using fetch
The best way to illustrate how fetching is eg. For this tutorial, we will be using the JSONPlaceholder web service. This is an API that comes with pre-written dummy data that we can use to test our web requests
The following code creates a GET request to retrieve the first post from JSONPlaceholder.
This code returns:
pause Let our code. In the first line, we used the
fetch () to make a web request to the JSONPlaceholder API. We then used the
. then () to indicate our code what to do after our web request is done
In our first
. then () , we convert the response returned by the JSON API. This makes our data more readable. we use another
.then () to log the response to the console. This shows us the post with ID 1 from the JSONPlaceholder API.
How to make a pOST request
GET is not the only type of request you can make with the API lookup. There is also a feature which supports POST, PUT and DEL requests. the syntax for these is the same, so we’ll just look at an example: how to do a POST
During a POST, PUT or DELETE request, three pieces of information are usually needed to clarify:.
- The URL you are requesting from.
- The method you are using on demand and t requests (in this case, POST)
- The data you want to send to the server
Here is a code snippet that would create a new comment using the JSONPlaceholder API:
Our code returns our newly created post in JSON format:
In our code, we first declare a data object. This stores the data that we want to send to the server. In this case, we are submitting data on a comment made by a user named Leslie Tudor.
We then declare another object that stores the options associated with our fetch request . This object specifies the method we use to make our request (POST), the data we want to send, and the headers we want to send
Finally, we use the
fetch () to actually make our request. Like in our first example, we use
. then () to fetch the response, convert it to JSON and then print it to the console.
It is an unfortunate fact that some web requests do not work as expected. Perhaps that the data is structured incorrectly or maybe there is a problem with the server. It is important to anticipate these events in advance so that you can manipulate them if and when they occur.
There is a method called
.catch () which you can use to catch any errors returned by your code. Combined with
Promise.reject (), you can use it to handle errors:
This code returns:
In our code, we used the response.ok method to check if our request was successful. In this example, we tried to retrieve a comment that does not exist, comment # 999. This causes the contents of our
other statement to be executed, which returns a rejected promise. This promise contains the error message returned by the JSONPlaceholder API.
We then used a
.catch () statement to receive this error and print it to the console.