A Beginner's Guide to HTTP - Part 3: Requests

In this part of the series, I'll demonstrate generating HTTP requests from a simple React app using XHR, Fetch, and Axios. You can view all of the code in the . After this, in A Beginner's Guide to HTTP - Part 4: APIs, we'll have some fun with APIs other people have built. Github repository I covered terms and definitions necessary for understanding HTTP messages in . Then, I demonstrated how to generate response messages in . So we know before sending the request message with instructions for the server, the client has to encode it and attach the information the server will need to decode it. Then, after the client receives a response back from the server, it will also need to be decoded. Let's dive in to the code required to do all that. part 1 part 2 Introduction and Table of Contents This article assumes familiarity with basic JavaScript, , and the terms defined in . It also assumes you followed . command line part 1 part 2 A Simple React App JSON.parse() and JSON.stringify() XHR Fetch Axios A Simple React App Now, we need a client! At the same level as your server folder, make a folder called client. Navigate to the folder in a terminal and run . npm install react After it finishes installing, run and follow the prompts. When you see in code, it means replace with your own new word without the . So for my code, I ran . is bundled with npm. Where npm installs packages, npx executes/runs them. will generate all the files you need for a React app. npx create-react-app npx create-react-app http101 npx create-react-app After it's done, in addition to the new folders and files, you should see "Success! Created " and other successful build logs in your terminal. Run , and you should see build logs and "Compiled successfully!". Your browser should open a new tab navigated to the URL with the boilerplate React app displayed. npm start http://localhost:3000/ Like with the Node.js Express server, use ctrl + c to kill the app. Unlike with the server, the React development build will watch for changes and rebuild for you. Open in your text editor. This file is the JavaScript entry point. In other words, any components we create need to be imported here to be rendered when the app runs. I import my 3 components like this: client > src > index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import XHR from './Components/XHR'; import Fetch from './Components/Fetch'; import Axios from './Components/Axios'; import reportWebVitals from './reportWebVitals';

ReactDOM.render( , document.getElementById('root') );

// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); In the src folder created by create-react-app, I made a folder named Components and added three component files, XHR.js, Fetch.js, and Axios.js. The structure of my Fetch component looks like this: import React from 'react';

function Fetch() { return ( "This is how I make Fetch a thing."

) }

export default Fetch; The other two look almost exactly the same. When I run from my terminal and my browser tab opens , I see all three of my components' strings displayed. npm start http://localhost:3000 JSON.parse() and JSON.stringify() Before we get into the code for the HTTP requests individually, let's talk about JavaScript's built-in methods for converting JSON to JavaScript and vice versa. takes a JSON object or array and turns it into valid JavaScript. takes valid JavaScript and turns it into valid JSON, sometimes referred to as a JSON string. JSON.parse() JSON.stringify() In the following code block, the first log would print out a JavaScript object, and the second would print a JSON string. let yarn = JSON.parse({ "yarn": { "id": 5, "name": "Wonderland Yarns & Frabjous Fibers Mary Ann", "weight": "Light Fingering", "meters": 539.5 } })

console.log(yarn)

let newBody = JSON.stringify(yarn)

console.log(newBody) It's manually doing what the body parser was doing for us in the Express server. express.json() XHR We don't have to import XMLHttpRequest into our React app - it's already available because you're writing JavaScript for the browser. For every request, we will have to instantiate XHR and build the request using a handful of methods. GET To build a GET request to my endpoint, I instantiate an XHR object I've called , open the request while passing the method and URL, and then send the request. Finally, I write a function to handle what happens when the response is received. In my function, I parse the JSON I received into a valid JavaScript object with and log the first item in the array that was returned. /yarn gXHR gXHR.onload() gXHR.onload() JSON.parse() function getRequest() { // create a request object let gXHR = new XMLHttpRequest()

// set method and URL gXHR.open("GET", "http://localhost:8080/yarn")

// send GET request gXHR.send()

// what happens when the response is received gXHR.onload = function() { if (gXHR.status !== 200) { console.log(gXHR.status, gXHR.statusText) } else { let yarns = JSON.parse(gXHR.response) console.log(yarns[0]) } } } is a listener, essentially a loop that runs until the method finishes. The function I wrote and assigned to is a callback function to run after the HTTP request has concluded. .onload() .send() .onload() POST The POST request looks similar, but we also have to pass a body. I start by defining my POST body and passing it to to turn the JavaScript object into JSON. I also have to set the header so XHR knows to send the body formatted as JSON. Then, when I create my request, I pass my JSON string to the method. Finally, I don't the response in because the response is a string. JSON.stringify() Content-Type pHXR.send() JSON.parse() pXHR.onload() function postRequest() {

let body = JSON.stringify({ yarn: { id: 5, name: "Wonderland Yarns & Frabjous Fibers Mary Ann", weight: "Light Fingering", meters: 539.5 } })

let pXHR = new XMLHttpRequest()

pXHR.open("POST", "http://localhost:8080/yarn/create")

// set request header pXHR.setRequestHeader('Content-type', 'application/json; charset=utf-8')

pXHR.send(body)

pXHR.onload = function() { if (pXHR.status !== 200) { console.log(pXHR.status, pXHR.statusText) } else { console.log(pXHR.response) } } } DELETE Finally, my DELETE request: function deleteRequest() { let dXHR = new XMLHttpRequest()

dXHR.open("DELETE", 'http://localhost:8080/yarn/delete/3')

dXHR.send()

dXHR.onload = function() { if (dXHR.status !== 200) { console.log(dXHR.status, dXHR.statusText) } else { console.log(dXHR.response) } } } If this was a real app, I would pass the id of the yarn I wanted deleted to and add it dynamically to the URL in a template string like this: deleteRequest() `http://localhost:8080/yarn/delete/${id}` However, passing an id to an handler in React is a tutorial for another time. onClick Putting It All Together I use these functions as handlers for three buttons: onClick return ( GET POST DELETE ) To test, I run the client in one terminal using and the server in a second terminal using . In the browser, I watch the console tab in the . As I press the buttons, the different strings I expect to see appear. npm start node app.js browser developer tools We've built our first full HTTP conversation! The buttons trigger JavaScript that builds and encodes an HTTP request and then sends it to our server. Our server receives the HTTP request, decodes it, and based on the instructions, sends back an encoded request message. When the client receives the encoded request message, it decodes it and logs part of it to the console. Fetch Having worked mainly in newer HTTP packages at this point, XHR feels very manual to me. To write one request, we have to use multiple methods. With Fetch, we can write a GET request in one line. Fetch is also a Web API, so we don't have to import it either. We don't even have to instantiate it - is a function all on its own. fetch() GET Here is the one line GET request: function getRequest() { fetch("http://localhost:8080/yarn") .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error)) } is doing a lot of work for us. Because we didn't pass configuration options, Fetch is using the default settings. The method is automatically set to GET. In the first , is using Fetch's built-in JSON parser to convert the JSON body to JavaScript. fetch() .then() response.json() Similarly, the next few lines do a lot in a few characters. In fact, they're on new lines for readability for humans, as far as JavaScript is concerned, it's actually all one line. fetch("http://localhost:8080/yarn").then(response => response.json()).then(data => console.log(data[0])).catch(error => console.log(error)) Because Fetch is based on promises under the hood, it returns a promise object. This means we can use chained and functions to handle the result of the HTTP request. So this code is saying after the promise object is returned as fulfilled, take the response message body and parse the JSON. Then take the newly parsed data and log the first result in the array. If the promise object is instead returned as failed, catch it, and log the error. .then() .catch() Learning the arrow function syntax and async chaining at the same time can be confusing - I know from experience. The function is waiting for the execution of the function before it to finish and then executing the function passed to it. We could rewrite it like this: .then() function parseData(response) { response.json() }

fetch("http://localhost:8080/yarn").then(parseData(response)) Not to mention, this is essentially like creating a callback, but outside of the function that needs to run before the callback is executed. We could rewrite the getRequest function using async/await syntax and a callback with the same result: function parseData(response) { return response.json() }

async function getFetch() { fetch("http://localhost:8080/yarn") }

function getRequest(callback) { let response = await getFetch()

callback(response) }

getRequest(parseData) Notice I didn't write any error handling to replace . is there to handle errors that happen within the Fetch request. It is triggered by a JavaScript error. To handle a response with a 500 status code, or server error, I would have to check the response after I've received it to verify it's an error. We'll go into this more in part 4. .catch() .catch() POST To make the POST request to my endpoint work, we'll have to pass configuration options to the method. I start by building my body and converting it to JSON. Then, when I create my Fetch request, I pass a config object after my URL. Finally, because the response is a string, we have to parse it using instead of before we can log it to the console. /yarn/create fetch() .text() .json() function postRequest() {

let bodyString = JSON.stringify({ yarn: { id: 5, name: "Wonderland Yarns & Frabjous Fibers Mary Ann", weight: "Light Fingering", meters: 539.5 } })

fetch("http://localhost:8080/yarn/create", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: bodyString }).then(response => response.text()) .then(data => console.log(data)) .catch(error => console.log(error)) } DELETE The DELETE method also requires a config object and the method to parse the body. .text() function deleteRequest() { fetch("http://localhost:8080/yarn/delete/2", { method: "DELETE" }) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.log(error)) } Putting It All Together Like with my XHR component, I hooked those three functions up to three buttons. When I run my client in one terminal and my server in another and click them, the responses I expect are logged to the console. Axios Axios is an npm package, so I run in my terminal to install it. I also have to import it at the top of my file: npm install axios import axios from 'axios'; GET Now that it's been imported, we can use the method to write a request. Since Axios also uses promises, we can still chain with and . .get() .then() .catch() function getRequest() { axios.get('http://localhost:8080/yarn') .then(response => console.log(response.data[0])) .catch(error => console.log(error)) } Right off the bat you can see how this format is closer to the Express server than XHR. Furthermore, you may have noticed I didn't have to parse the body of the response - Axios does that for us. As part of that formatting, the structure of the response object we can reference is changed - instead of , I have to reference . Because they have it , I knew to expect that. We'll delve into evaluating response format when you don't know what to expect in part 3. response.body response.data in the docs POST Next up, the POST request. Thanks to Axios, I don't have to my body and the method allows you to pass an object to add to the body after the URL. JSON.stringify() .post() function postRequest() { axios.post('http://localhost:8080/yarn/create', { yarn: { id: 5, name: "Wonderland Yarns & Frabjous Fibers Mary Ann", weight: "Light Fingering", meters: 539.5 } }).then(response => console.log(response.data)) .catch(error => console.log(error)) } I didn't even have to pass a header - Axios tries to all request bodies and all response bodies. We'll cover how to use the config object to set headers (and method and authentication) in part 4. JSON.stringify() JSON.parse() DELETE Finally, the DELETE request to my endpoint, looking much like the GET request: /yarn/delete/:id function deleteRequest() { axios.delete('http://localhost:8080/yarn/delete/1') .then(response => console.log(response.data)) .catch(error => console.log(error)) } Putting It All Together Once again, I hook these functions up to buttons, and now I have 3 rows of ugly buttons returning the responses I expect. Conclusion Starting with XHR and ending with Axios, you can really see how HTTP request packages and async methods for JavaScript have evolved and been abstracted over the years. Because there's so much going on under the hood but the methods themselves are easy to use, a lot of these concepts are glazed over when teaching students about how to use HTTP. I hope this series is giving you a better understanding of the inner workings of HTTP messages as a whole. If you're left confused or have any questions about any of the topics I've touched on in this part of the series, please don't hesitate to leave a comment! Now we know how requests and responses are generated in JavaScript. Stay tuned for A Beginner's Guide to HTTP - Part 4: APIs. Once I finish writing it, this next part of the series will cover evaluating APIs other people have built and using them in your own app. This will include authentication, displaying what we receive from APIs in the browser, error handling, and more. Also Published here

A Beginner's Guide to HTTP - Part 3: Requests

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@abbeyperini

RELATED STORIES