Fetching data asynchronously

Homework

1. JSON
   • Read: Working with JSON data
   • Tool: JSON Placeholder
2. fetch()
   • Read: Fetching data from the server
   • Read: How to use Fetch API for CRUD operations on dev.to
   • Reference: Create, read, update and delete on Wikipedia
3. Reference
   • List of Public APIs

---

Morning reflection

Housekeeping

• Swapping Assignment 3 and 4 in the schedule.

---

1. HTTP: The Request/Response Cycle

Learning Objectives

• Understand the purpose of the HTTP protocol.
• Summarize the request/response cycle.
• Describe common response status codes:
  • 200 OK
  • 304 Not Modified
  • 404 Not Found
  • 418 I'm a teapot
  • 500 Internal Server Error
• Locate where HTTP headers are listed in the browser inspector.

Terminology

Resource

Anything that can accessed via the web. Examples: text file (HTML, CSS, JS, etc), images, video, etc.

HTTP Request

A text string generated by the client (browser) and sent to the server containing the specifications of the resource the client is asking for.

HTTP Response

The resource sent by a server to a client in response to an HTTP request.

HTTP Header

A name/value pair that specifies various details of a request (request header) or response (response header).

HTTP Method

“Action verbs” that map to CRUD operations.

Endpoint

The URL of a requested resource.

Key Takeaways

• We’ll dive deeper into HTTP when we get to Node. For now, we’re only retrieving information with the GET method and were mostly concerned with the 200 and 404 status codes.

---

2. JSON vs Javascript objects

Learning Objectives

• Understand the purpose of JSON.
• Explain the differences between JSON and javascript objects.
• Summarize the most common JSON structures used online:
  • a single value
  • an array of values
  • an object of values

Terminology

JSON

A lightweight data-interchange format that is inspired by the Javascript object. It’s simple for humans to read and write and simple for machines to parse and generate.

Materials

• List of Public APIs
• Tony’s Definitions JSON Endpoint
  • For testing .catch(): Same API with no CORS header

Key Takeaways

• The primary purpose of JSON is to send data over HTTP.
• Even though JSON stands for “Javascript Object Notation”, it’s a data format that is technology agnostic. JSON is used by most programming languages when transferring data over the internet.
• JSON is eventually converted to the native data format of whatever programming language is using it. For example, PHP will convert a JSON object into an associative array (PHP’s version of a Javascript object).

---

3. Using the fetch API

Learning Objectives

• Describe the problem that promises solve.
• Summarize the two states of a promise:
  • success -> .then(callback)
  • failure -> .catch(callback)
• Demonstrate the use of a promise using the browser fetch API.

Terminology

Promise

A fancy way to chain asynchronous functions. If a promise is successful, it will pass a value to .then(); otherwise it will pass an error to .catch().

Materials

• MDN: Using fetch
• Gist: fetch: Retrieving data asynchronously
• In-class from W7R: Definitions loop

Key Takeaways

See the above Gist.

---

Open lab-time

• Using the random array item exercise, fetch and this list of Public APIs create a “random thing of the day” page using a 3rd party API.

---

Tony’s goals for Lab-Time

• Refactor the Scope exercise answers into markdown?

---

Dailies

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.