MDN docs study Flashcards
studying from MDN docs on JS
What is the Fetch API?
The Fetch API provides an interface for fetching resources (including across the network).
The Fetch API uses Request and Response objects (and other things involved with network requests), as well as related concepts such as CORS and the HTTP Origin header semantics.
For making a request and fetching a resource, use the fetch() method. It is a global method in both Window and Worker contexts. This makes it available in pretty much any context you might want to fetch resources in.
What is the fetch() method?
For making a request and fetching a resource, use the fetch() method. It is a global method in both Window and Worker contexts. This makes it available in pretty much any context you might want to fetch resources in.
he fetch() method takes one mandatory argument, the path to the resource you want to fetch.
It returns a Promise that resolves to the Response to that request — as soon as the server responds with headers — even if the server response is an HTTP error status.
What are the Fetch API Interfaces?
fetch()
Headers
Request
Response
How is the Fetch API different from the XMLHttpRequest API?
Unlike XMLHttpRequest that is a callback-based API, Fetch is promise-based and provides a better alternative that can be easily used in service workers.
Fetch also integrates advanced HTTP concepts such as CORS and other extensions to HTTP.
What does a basic fetch() request look like?
The simplest use of fetch() takes one argument — the path to the resource you want to fetch — and does not directly return the JSON response body but instead returns a promise that resolves with a Response object.
How do you extract JSON body content from the Response object returned by fetch()?
The Response object, in turn, does not directly contain the actual JSON response body but is instead a representation of the entire HTTP response.
So, to extract the JSON body content from the Response object, we use the json() method, which returns a second promise that resolves with the result of parsing the response body text as JSON.
Explain Fetch in a nutshell.
At the heart of Fetch are the Interface abstractions of HTTP Requests, Responses, and Headers, along with a fetch() method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.
Service Workers is an example of an API that makes heavy use of Fetch.
Fetch takes the asynchronous nature of such requests one step further. The API is completely Promise-based.
What are some of the settings you can set in the fetch() method’s second param (init)?
How do you process a text file line by line from a fetch() response?
The chunks that are read from a response are not broken neatly at line boundaries and are Uint8Arrays, not strings. If you want to fetch a text file and process it line by line, it is up to you to handle these complications. The following example shows one way to do this by creating a line iterator (for simplicity, it assumes the text is UTF-8, and doesn’t handle fetch errors).
How do you check if a fetch() was successful?
A fetch() promise will reject with a TypeError when a network error is encountered or CORS is misconfigured on the server-side, although this usually means permission issues or similar — a 404 does not constitute a network error, for example. An accurate check for a successful fetch() would include checking that the promise resolved, then checking that the Response.ok property has a value of true. The code would look something like this:
What are common properties of the Response instances returned when fetch() promises are resolved?
The most common response properties you’ll use are:
- Response.status — An integer (default value 200) containing the response status code.
- Response.statusText — A string (default value “”), which corresponds to the HTTP status code message. Note that HTTP/2 does not support status messages.
- Response.ok — seen in use above, this is a shorthand for checking that status is in the range 200-299 inclusive. This returns a boolean value.
What types can the body data of a Response instance be?
ArrayBuffer
TypedArray (Uint8Array and friends)
DataView
Blob
File
String, or a string literal
URLSearchParams
FormData
How do you upload a file using fetch()?
Files can be uploaded using an HTML <input></input> input element, FormData() and fetch().
How do you upload multiple files using fetch()?
Files can be uploaded using an HTML <input></input> input element, FormData() and fetch().
How do you supply your own request object to fetch()?
Instead of passing a path to the resource you want to request into the fetch() call, you can create a request object using the Request() constructor, and pass that in as a fetch() method argument:
