1.5 hour total
HTTP is the most common way you will retrieve anything from the internet: usually web pages or API data (see API & JSON lesson). It’s the backbone of the web. Since HTTP is so simple and versatile (it’s just text!), you can make requests lots of different ways.
Participants will be able to:
HTTP requests are text-based messages used to request a resource from a server. In these lessons we’ll focus on GET requests but there are other methods as well, such as POST, which is used on a form to submit data or in an API to save data.
Open Postman to make a new GET request.
https://worldtimeapi.org/api/ip
Inspect the result. If you want you can try out other types of requests listed on the API doc. Varying the URL will give you different data.
Now let’s make the same request using the curl command line unix utility.
Find the Code link in Postman on the right.
This will allow us to make the same request using a variety of other tools. Choose cURL from the dropdown.
You will see something like this:
curl -X GET \
https://worldtimeapi.org/api/ip \
-H 'Accept: */*' \
-H 'Accept-Encoding: gzip, deflate' \
-H 'Cache-Control: no-cache' \
-H 'Connection: keep-alive' \
-H 'Host: worldtimeapi.org' \
-H 'Postman-Token: 8d3f63db-f54f-48fe-997f-f1f678464644,f75b0ac1-ec5e-489d-af1a-fdefc80d56f9' \
-H 'User-Agent: PostmanRuntime/7.19.0' \
-H 'cache-control: no-cache'Copy this entire snippet and paste into Terminal.
You should see output like this:
You might wonder where all those -H lines are coming from when we only put the URL in Postman. As we learned in the HTTP video, headers tell the server additional options. They are like flags in a command line tool or parameters in a JavaScript function. In the case of HTTP, they are almost always optional.
\)Why was it the same? In our case, Postman generated a set of sensible defaults. If we omit them, the server will have its own sensible defaults and so the result is more or less the same.
curlcurl and other tools, what does that tell us about Postman?Now let’s go into the browser world, which is more useful for creating web apps.
First, we will use the original interface, XMLHttpRequest which was added to JavaScript to allow the original background requests commonly called AJAX. It is a little awkward to use.
function reqListener() {
console.log(this.responseText);
}
let oReq = new XMLHttpRequest();
oReq.addEventListener('load', reqListener);
oReq.open('GET', 'https://worldtimeapi.org/api/ip');
oReq.send();If correct, you should see the result:
window.fetch - Time APINewer browsers expose an interface called fetch that is much easier to use and leverages native Promise for simpler processing of the result. And since it is built-in you don’t need to add any libraries to use it in the browser.
Let’s try it out!
response = await fetch('https://worldtimeapi.org/api/ip')await response.json()await). What are some reasons this might be the way it was designed?async function to use await? Why didn’t we need to worry about that here?https://caniuse.com/#feat=fetch
Almost all modern browsers support fetch. Unless your app needs to support IE11, then it’s safe to use. Even then, you can polyfill it, e.g. Github’s polyfill.
Open a new tab to try to issue the same fetch command.
response = await fetch('https://worldtimeapi.org/api/ip')await response.json()What happens?
To keep things simple, for this example, we just load the same origin, worldtimeapi.org, so we didn’t have to worry about it.
http.request in NodeThere are too many HTTP libraries to count in Node, but there is one that is built-in that we’ll use.
const options = {
hostname: 'worldtimeapi.org',
port: 443,
path: '/api/ip',
method: 'GET'
};
const req = https.request(options, (res) => {
console.log(`statusCode: ${res.statusCode}`);
res.on('data', (d) => {
process.stdout.write(d);
});
});
req.end();fetch is a standard added by browsers but if you like it, it’s also available as a package for node. Let’s use it!
Since there are tons of libraries out there, now’s a great time to try a few and see what you like/dislike about them compared to those we used above.
Sync up with your pair or another apprentice who is available and go through the following exercises.