TURK GUZELI – BOOK YOUR BEAUTY
TURK GUZELI – BOOK YOUR BEAUTY SESSION ONLINE IN TURKEY
APP Available only in Turkey .
Development : Naro Dev
Tag: https
How to Authenticate Users: JWT vs. Session
In web applications, you try to decide when to use either JSON Web Tokens (JWTs) or sessions (cookies) for authentication. When you browse the web you use HTTP, which is a stateless protocol. So, the only way to remember the states of your application is using either sessions or tokens.
Use Fetch API for web apps
Fetch API has become the standard for web API requests for a while now and it is supported in almost any modern browsers nowadays. Let’s use Fetch API and implement it for the web
Use Fetch API
Previously, there are many existing solutions for handling API requests for the web, ex. jQuery Ajax, request (node), axios (node) … why there needs another?
Why Fetch API?
Fetch API is the standard API being supported native in most of today web browsers.
Hmm, IE is not supported, you ask? Since Microsoft stopped support for IE, no more development for IE in future, and we will expect very less number of users use IE.
Fetch API Specifications
The specs of Fetch API is described here, https://fetch.spec.whatwg.org/
Check it out if you want to learn details about Fetch. In short, fetch() is being used in following form:
fetch(ENDPOINT, OPTIONS).then( response => {
// do something with response
}).catch(error => {
// do something with error
});ENDPOINT is the API target endpoint that you want to make actual requests to.
OPTIONS is the Request object.
Since fetch() returns a Promise, so you can handle it in chain with then() and catch() as usual.
The data return from Fetch API is a Response object.
Fetch API Examples
Aright, let’s try some examples to work with Fetch API.
Regular GET request
Query random-user API:
fetch('https://randomuser.me/api/').then(response => {
if(response.ok) return response.json();
}).then(data => {
console.log('Data', data);
}).catch(err => {
console.log(err);
});To get actual data, we have to resolve and call response.json() in order to get actual content returned by the API endpoint.
If there is any error, you can easily handle it through Promise.catch().
Use more HTTP request methods
By default, fetch() assumes that you use GET method. In case, you want to use other HTTP methods like POST, PUT, DELETE, PATCH… add method to the request options.
fetch(ENDPOINT, { method: 'POST' })Specify request headers
You can put any custom header value by adding into the headers property of request options.
fetch(ENDPOINT, {
headers: {
"Content-Type": "application/json",
}
)Send post body
To post data, you will need to include post data into body property of request options.
So, to request JSON data:
fetch(ENDPOINT, {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: "Pete Houston" })
})To request form data:
fetch(ENDPOINT, {
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
body: "name=Pete%20Houston"
})Include the credentials on fetch request
To do this, use the credentials property.
credentials: "include"Fetch API Polyfill
In order for older browsers to use fetch() , there is a polyfill made by Github, https://github.com/github/fetch
Summary
Fetch API is fairly simple to learn and implement into any web app. Since most of modern browsers support it, why not make use of it to cut down the cost of unnecessary cost of third-party libraries! It is a good thing for the web.
