“The world and your career are unpredictable, so you are better off learning subjects of permanent value” - Gian-Carlo Rota

fetch() is a global method provided by Fetch API which can be used to GET or POST data asynchronously through the network.

GET

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fetch("url", {
    method: "GET",
    mode: 'cors'
    }
    // default method is 'GET' if not provided
    // add "mode: 'cors'" to send cross orign request
).then(
    response => response.json()
    // methed json() will convert the ReadableStream to json data format
).then(
    data => console.log('Json data retrieved:', data)
    // data is ready for use
);
// you can also use methods below to extract a body 
// arrayBuffer(), blob(), text(), formData()

POST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var dataToServer = {....};
fetch("url", {
    method: "POST",
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
    },
    body: JSON.stringify(dataToServer)
    }
    // set headers as needed
).then(
    response => response.text()
    // response from server
).then(
    result => console.log('Result content:', result)
).catch(
    err => console.log('error meesage', err.messge)
);

Difference between fetch() and jQuery.ajax()

From Fetch API:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.
By default, fetch won’t send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set).