Introduction
Today I will be talking about a key tool to use in one's JavaScript arsenal. As the title suggests, I will be showing you how to communicate with online or locally hosted servers using your JS code. More specifically I will be covering how to insert fetch GET requests and describing a bit of what they are used for compared to other types of fetch requests. If you do not define a specific type of fetch request in your code, JavaScript will default to a GET request instead of a fetch patch, post or delete method. Moving on in the post I will refer to our GET requests as fetch requests, as leaving it undefined in JavaScript will give us the functionality we desire in our output with this method.
First lets establish a little bit of basic information regarding server interaction and why you would want to use something like a fetch request. Communicating with online servers allows you to access raw data that's arranged in the form of objects and arrays online through API's (Application Programming Interface). I will also briefly cover what an API is as we will be using one in our example below to demonstrate how to use fetch requests.
What's an API?
API's are ways in which companies, organizations or even just enthusiasts on specific subjects, expose their data and/or functionality to the public. This allows us to add important data to our code and reference it without having to input lines upon lines of objects to use. They are already available to us, so it is better to make use of our resources, instead of repeating the work someone else has done for us. Just make sure to give credit to authors of API's in your README files when you use them. So in short, we are able to use our fetch requests to use JavaScript to send a web request to an API and receive a collection of JSON in return.
What's JSON?
JSON stands for Javascript Object Notation. JSON is a language-agnostic way of formatting data. In sending a request to one of the above mentioned API's it will return to us a JSON collection of data. With just one line of code, you are able to tell Javascript to treat the API data as a nested object. This method will allow us to use large and complicated amounts of data without overloading our code with hundreds of lines of objects and variable declarations.
Why use fetch requests over our other functionality?
Now the last question to answer is why you would want to use a fetch request specifically over our other server request commands that we have access to in Javascript such as patch, post or delete? The answer is that a fetch request will simply help your code communicate with an online or locally hosted server and provide you with reference points for your code to interact with. A patch request is going to update and change the information on the server, a delete request will do as it's namesake implies and get rid of it, and a post request is going to display information from the server. A fetch request can help you pick and choose what information you would like to display in your code.
Example
Let's show a simple example of how to accomplish linking our local client to an API server using a fetch request. For this example we'll use a Star Wars API provided at https://swapi.dev/api.
First we'll write out our basic command for fetch requests in Javascript:
Pretty quick and easy, but there's still a little more code to write. With this first initial line, all we have done is request the information from the API, but we haven't done anything with it yet.
So the next step is to use what is known as the json() method of the response interface to actually get our JavaScript code talking to the online server. That looks something like this:
This second and third line of code that we have added allows us to render the API's response into something readable to us as the user. We use arrow syntax here to make sure that the object (The API in this instance) is returned and passed to our next then() and the console.log() will print the object to our console.
This method of fetching our data from servers, regardless of where they are hosted, is known as the Response.json() method and according to developer.mozilla.org/ this method " ...takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.
Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object."
Conclusion
There you have it! We've successfully linked an online server to our JavaScript code using the fetch GET method. We are also able to use the json() method when we move on to other requests. This basic use of GET requests can stretch out into other, important methods of interacting with online and local servers.
Top comments (0)