Week 13 - Advanced Fetch

Fetch Headers

When you use the fetch() method you are making an HTTP Request. Every request and response is made up of Headers and a Body. The Body is the container for files being sent to the Server or the file that will be loaded and displayed in the browser.

The headers are a list of name-value pairs that represent settings and other information about the Request | Responseor data that is related.

When making a fetch call we can provide a Request object instead of just a URL. The Request method takes a URL as its first parameter, then an options object as the second.

let h = new Headers();

let req = new Request(url, {
  method: 'POST',
  headers: h,
});

The headers property in the Request object is where we put our headers which will be sent with our fetch Request.

The QueryString is sent as a header. Cookies are also sent as a header.

All the CORS values are sent as headers too.

MDN Headers Object reference

Request Object

The Request object has many properties. Many have default values and some are useful only under special circumstances. The Request object contains everything that is sent from the browser to the server.

MDN Request Object reference

• method: The request method, e.g., GET, POST, OPTIONS, PUT, PATCH, DELETE, HEAD. The default is GET.
• headers: Any headers you want to add to your request, contained within a Headers object or an object literal with ByteString values.
• body: Any body that you want to add to your request: this can be a Blob, BufferSource, FormData, URLSearchParams, USVString, or ReadableStream object. Note that a request using the GET or HEAD method cannot have a body.
• mode: The mode you want to use for the request, e.g., cors, no-cors, same-origin, or navigate. The default is cors.
• credentials: The request credentials you want to use for the - request: omit, same-origin, or include. The default is same-origin.
• cache: The cache mode you want to use for the request.
• redirect: The redirect mode to use: follow, error, or manual. The default is follow.
• referrer: A USVString specifying no-referrer, client, or a URL. The default is about:client.
• integrity: Contains the subresource integrity value of the request (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Response Object

The Response object is what returns to the browser after a Request has been sent. It is also made up of a Headers section and a Body section. The Headers are similar to the ones in a Request but the values are created by the Server.

In the Network Tab in the browser Developer Tools we can see all the Requests, Responses, and if we select a request, the Headers.

Body Object

The Body is the actual file or files being sent between the browser and the server. Both Requests and Responses can have a Body object inside them.

The Body object has the .json(), .text(), and blob() methods for extracting the text, json data, or binary data from the body. These methods, in the body object, are available to the Request and the Response objects, which is why the fetch response in the first then() method's function can call response.json().

MDN Body reference

Transition Events

There will be times when you want to use a CSS transition on your webpage to create a visual effect, but you want to run some JavaScript only after the transition is complete. This is where the transitionend event can be useful.

As long as your transitions are simple, and not greatly staggered, then you will be able to use this technique.

let sidebar = document.getElementById('sidebar');
sidebar.addEventListener('transitionend', (ev) => {
  //this runs when a CSS transition on #sidebar is over
});

MDN transitionend event reference

Web Animations API

The following short video talks about Web Animation gotchas and how the newer Web Animations API helps to solve some of these issues.

Web Animations API MDN reference

RequestAnimationFrame

When you want to have some JavaScript run on a frequent interval but you want the interval to be tied closely to the performance of the browser and run at the most optimal times that can take advantage of available resources, then you should consider using RequestAnimationFrame instead of setInterval.