Javascript Recovery

| | | | | | |

Did you know that you can do web requests in vanilla JavaScript? Which is fair, you don’t need to install any libraries to make a web request. That’s not all: we are not talking about the old and complex XMLHttpRequest tool

The fetch API allows to perform Ajax requests in good old JavaScript. It is a useful tool for the recovery of data and make changes to the data on a web server.

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

Has JavaScript been able to send network requests for a long time ?. The XMLHttpRequest tool has provided the resources to recover data from to a server information and update day to go to a server.

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:.

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.

How to Handle Errors Using JavaScript Fetch

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.

Conclusion

The API look up makes it easy to execute web requests in JavaScript. The API is part of vanilla JavaScript, so you don’t need to install or reference any libraries. You can also use API to do fetch GET, POST, PUT and DELETE requests

.