Skip to content
Gallery
Handbook Backend
Huvudmoment
API-gränssnitt
Protokoll
Säkerhet
Databaskoppling
Fullstack
Agilt Arbetssätt
(Extra)
More
Share
Explore
Javascript

Vanilla (fetch)

Förklaring 2
Viktigt att ha koll på:
Basic fetch request
2. Uploading JSON data

_________
The
Fetch API
⁠
provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global
fetch()
⁠
method that provides an easy, logical way to fetch resources asynchronously across the network.
This kind of functionality was previously achieved using
XMLHttpRequest
⁠
. Fetch provides a better alternative that can be easily used by other technologies such as
Service Workers
⁠
. Fetch also provides a single logical place to define other HTTP-related concepts such as
CORS
⁠
and extensions to HTTP.
The fetch specification differs from jQuery.ajax() in the following significant ways:
The Promise returned from fetch()won't reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, as soon as the server responds with headers, the Promise will resolve normally (with the
ok
⁠
property of the response set to false if the response isn't in the range 200–299), and it will only reject on network failure or if anything prevented the request from completing.
Unless fetch() is called with the
credentials
⁠
option set to include, fetch():
won't send cookies in cross-origin requests
won’t set any cookies sent back in cross-origin responses

A basic fetch request is really simple to set up. Have a look at the following code:

fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));


Here we are fetching a JSON file across the network and printing it to the console. 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.
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.
Note: See the
Body
⁠
section for similar methods to extract other types of body content.
Fetch requests are controlled by the connect-src directive of
Content Security Policy
⁠
rather than the directive of the resources it's retrieving.

⁠
Supplying request options
⁠
⁠

The fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings:
See
fetch()
⁠
for the full options available, and more details.

// Example POST method implementation:
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
.then(data => {
console.log(data); // JSON data parsed by `data.json()` call
});


Note that mode: "no-cors" only allows a limited set of headers in the request:
Accept
Accept-Language
Content-Language
Content-Type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain

⁠
Sending a request with credentials included
⁠
⁠

To cause browsers to send a request with credentials included on both same-origin and cross-origin calls, add credentials: 'include' to the init object you pass to the fetch() method.
fetch('https://example.com', {
credentials: 'include'
});


Note: Access-Control-Allow-Origin is prohibited from using a wildcard for requests with credentials: 'include'. In such cases, the exact origin must be provided; even if you are using a CORS unblocker extension, the requests will still fail.
Note: Browsers should not send credentials in preflight requests irrespective of this setting. For more information see:
CORS > Requests with credentials
⁠
.
If you only want to send credentials if the request URL is on the same origin as the calling script, add credentials: 'same-origin'.

// The calling script is on the origin 'https://example.com'

fetch('https://example.com', {
credentials: 'same-origin'
});

To instead ensure browsers don't include credentials in the request, use credentials: 'omit'.
fetch('https://example.com', {
credentials: 'omit'
})

⁠
Uploading JSON data
⁠
⁠

Use
fetch()
⁠
to POST JSON-encoded data.
const data = { username: 'example' };

fetch('https://example.com/profile', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});

⁠
Uploading a file
⁠
⁠


Files can be uploaded using an HTML <input type="file" /> input element,
FormData()
⁠
and
fetch()
⁠
.
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.then(result => {
console.log('Success:', result);
})
.catch(error => {
console.error('Error:', error);
});

⁠
Uploading multiple files
⁠
⁠

Files can be uploaded using an HTML <input type="file" multiple /> input element,
FormData()
⁠
and
fetch()
⁠
.
const formData = new FormData();
const photos = document.querySelector('input[type="file"][multiple]');

formData.append('title', 'My Vegas Vacation');
for (let i = 0; i < photos.files.length; i++) {
formData.append(`photos_${i}`, photos.files[i]);
}

fetch('https://example.com/posts', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(result => {
console.log('Success:', result);
})
.catch(error => {
console.error('Error:', error);
});

⁠
Processing a text file line by line
⁠
⁠

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).

async function* makeTextFileLineIterator(fileURL) {
const utf8Decoder = new TextDecoder('utf-8');
const response = await fetch(fileURL);
const reader = response.body.getReader();
let { value: chunk, done: readerDone } = await reader.read();
chunk = chunk ? utf8Decoder.decode(chunk) : '';

const re = /\n|\r|\r\n/gm;
let startIndex = 0;
let result;

for (;;) {
let result = re.exec(chunk);
if (!result) {
if (readerDone) {
break;
}
let remainder = chunk.substr(startIndex);
({ value: chunk, done: readerDone } = await reader.read());
chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : '');
startIndex = re.lastIndex = 0;
continue;
}
yield chunk.substring(startIndex, result.index);
startIndex = re.lastIndex;
}
if (startIndex < chunk.length) {
// last line didn't end in a newline char
yield chunk.substr(startIndex);
}
}

async function run() {
for await (let line of makeTextFileLineIterator(urlOfFile)) {
processLine(line);
}
}

run();

⁠
Checking that the 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:
fetch('flowers.jpg')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not OK');
}
return response.blob();
})
.then(myBlob => {
myImage.src = URL.createObjectURL(myBlob);
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.