Synchronous properties of the Response object
After the fetch()
request is profitable, you get a Response
object. It corresponds to the HTTP response of the server.
const response = await fetch(url);
As talked about earlier, the info contained in Response
is learn asynchronously via the Stream
interface, but it surely additionally accommodates some synchronous attributes, which correspond to the header info of the HTTP response (Headers), which could be learn instantly.
Within the above instance, response.standing
and response.statusText
are the synchronous attributes of Response
and could be learn instantly.
Response.okay
The Response.okay
property returns a boolean worth, indicating whether or not the request is profitable, true
corresponds to the HTTP request standing code 200 to 299, and false
corresponds to different standing codes.
Response.standing
The Response.standing
property returns a quantity indicating the standing code of the HTTP response (for instance, 200, indicating a profitable request).
Response.statusText
The Response.statusText
property returns a string representing the standing info of the HTTP response (for instance, after the request is profitable, the server returns “OK”).
Response.url
The Response.url
property returns the requested URL. If the URL has a redirect, this attribute returns the ultimate URL.
Response.sort
The Response.sort
property returns the kind of request. The attainable values are as follows:
primary
: Extraordinary, same-origin request.cors
: Cross-origin request.error
: Community errors, primarily used for service employees.opaque
: If themode
attribute of thefetch()
request is ready tono-cors
, this response worth will likely be returned.opaqueredirect
: If theredirect
attribute of thefetch()
request is ready toguide
, this response worth will likely be returned.
Response.redirected
The Response.redirected
property returns a Boolean worth, indicating whether or not the request has been redirected.
Decide whether or not the request is profitable
After fetch()
sends a request, there is a crucial level to notice: fetch()
will report an error solely when there’s a community error or can not join. In different circumstances, no error will likely be reported, however the request is taken into account profitable.
This implies, even when the standing code returned by the server is 4xx or 5xx, fetch()
is not going to report an error (i.e. The Promise is not going to turn into rejected
). Solely by acquiring the true standing code of the HTTP response via the Responese.standing
property, can it’s decided whether or not the request is profitable. Please see the next instance:
Within the above instance, the Responese.standing
attribute have to be equal to 2xx (200~299) to find out that the request is profitable. There’s no want to think about the URL soar (standing code is 3xx) as a result of fetch()
will mechanically convert the jumped standing code to 200. One other technique is to find out whether or not Responese.okay
is true
.
Response.headers
property
The Response
object additionally has a Responese.headers
property, which factors to a Headers
object, which corresponds to all of the headers of the HTTP response. Headers
objects could be traversed utilizing for...of
loops.
The Headers
object gives the next strategies to control headers.
Headers.get()
: In line with the desired key identify, return the key-value.Headers.has()
: Returns a Boolean worth indicating whether or not a header is included.Headers.set()
: Set the desired key identify as the brand new key-value, if the important thing identify doesn’t exist, it will likely be added.Headers.append()
: Add headers.Headers.delete()
: Delete the header.Headers.keys()
: Return an iterator that may traverse all of the keys in flip.Headers.values()
: Return an iterator that may traverse all key values in flip.Headers.entries()
: Return an iterator that may traverse all key-value pairs in flip ([key, value]
).Headers.forEach()
: Traverse the headers, in flip. Every header will execute a parameter perform.
A few of the above strategies can modify the headers as a result of they inherit from the Headers
interface. For HTTP responses, modifying headers is of little significance — many headers are read-only and browsers don’t enable modification. Amongst these strategies, probably the most generally used is response.headers.get()
, which is used to learn the worth of a sure header.
The Headers.keys()
and Headers.values()
strategies are used to traverse the header keys and key values respectively.
The Headers.forEach()
technique may traverse all key values and key names.
The right way to learn content material
The Response
object gives completely different studying strategies based on several types of knowledge returned by the server.
response.textual content()
: Get the textual content string.response.json()
: Get the JSON object.response.blob()
: Get the binaryBlob
object.response.formData()
: Get theFormData
object.response.arrayBuffer()
: Get the binaryArrayBuffer
object.
The above 5 studying strategies are all asynchronous and all return Promise
objects. You will need to wait till the tip of the asynchronous operation to get the entire knowledge returned by the server.
response.textual content()
response.textual content()
can be utilized to get textual content knowledge, akin to HTML recordsdata.
response.json()
response.json()
is especially used to get the JSON knowledge returned by the server. The instance has been given earlier.
response.formData()
response.formData()
is especially utilized in Service Employee to intercept the shape submitted by the consumer, modify some knowledge, after which submit it to the server.
response.blob()
response.blob()
is used to get the binary file.
The above instance reads the flower.jpg
picture file and shows it on the internet web page.
response.arrayBuffer()
response.arrayBuffer()
is especially used to acquire streaming media recordsdata.
The above instance is an instance the place response.arrayBuffer()
will get the audio file music.ogg
after which performs it on-line.
Response.clone()
The Stream
object can solely be learn as soon as and it’s gone after studying. Which means solely one of many 5 studying strategies within the earlier part can be utilized, in any other case, an error will likely be reported.
let textual content = await response.textual content();
let json = await response.json(); // Report an error
The above instance makes use of response.textual content()
first after which reads the Stream
. After calling response.json()
later, there’s no content material to learn, so an error is reported. The Response
object gives the response.clone()
technique, which creates a duplicate of the Response
object and implements a number of reads.
Within the above instance, response.clone()
made a duplicate of the Response
object after which learn the identical picture twice. The Response
object additionally has a Response.redirect()
technique, which is used to redirect the Response
end result to the desired URL. This technique is mostly solely utilized in Service Employee
, so I gained’t introduce it right here.
Response.physique
attribute
The Response.physique
property is the underlying interface uncovered by the Response
object. It returns a ReadableStream
object for consumer operations. It may be used to learn content material in blocks. One utility is to show the progress of the obtain.
Within the above instance, the response.physique.getReader()
technique returns an iterator. The learn()
technique of this traverser returns an object every time, representing the content material block learn this time. The achieved
attribute of this object is a boolean worth, used to evaluate whether or not it has been learn. The worth
attribute is an arrayBuffer
array, which represents the content material of the content material block. The worth.size
attribute is the dimensions of the present block.