Network Requests via Fetch() API
The fetch method in JavaScript is an interface through which you can send requests over the network.
There are several ways to send requests to the server and receive information, and the fetch method is a modern, new and comprehensive way.
Old browsers, especially the popular IE browser, do not support this method.
As a result, when using this method, you must be sure that the client is using a new browser.
This method reduces the complexity of sending requests by using promises in JavaScript, and thus you will write a more readable code.
How to request with the fetch method is as follows:
let promise = fetch(URL, [options])
The only mandatory parameter for sending the request is the url and [options] are the parameters such as method, header, etc. that you want to include with the request.
The browser immediately encounters this method and starts sending requests and finally returns a promise, and the response will be available after the returned promise is resolved.
If for some reason the fetch method cannot send a request to the server, the returned promise will be rejected.
Once the promise is resolved and the response is received, there are two steps to read the received data:
First, you should check the http status code and make sure that the request has been sent successfully or not.
The next step is to read the body of the response, for this purpose, the response provides you with the promise base methods.
The methods are as follows:
response.text()
To read the response as text
response.json()
To read the response as json
response.formData()
To read the response as formData
response.blob()
To read response as Blob
(Binary data with type)
response.arrayBuffer()
Reading response as ArrayBuffer
(low level display of binary data)
In addition, response.body will be a ReadableStream object that allows you to read the body.
You can use only one of these methods to read the response body.
If you read the response body using one of these methods, you will not be able to read the response body again.
let text = await response.text(); // response body consumed
let parsed = await response.json(); // fails (already consumed)
Differences from jQuery Ajax
We said that the output of the fetch method is a promise, the returned promise will not be rejected even if the Http status code is 404 or 500.
And only Okstatus for the returned response will be false.
The fetch method does not send the cookie in requests unless you set the credentials equal to same-origin along with the sent request.
fetch(
http://domain/service,
{
method: GET
credentials: same-origin
}
)
When using the fetch method, cookies sent from different domains (cross-site cookie) will not be received.
Fetch vs Ajax
If you have a client that may use IE, fetch will not be a good choice, and this fetch method does not have all the features of Ajax, but Fetch will undoubtedly be the future, so be careful in using it for now.
@FullStackDevs
This post is written by MehdiSheykhveysi