fetch-api

Javascript: Fetch DELETE and PUT requests

by

Here is a fetch POST example. You can do the same for DELETE. function createNewProfile(profile) { const formData = new FormData(); formData.append(‘first_name’, profile.firstName); formData.append(‘last_name’, profile.lastName); formData.append(’email’, profile.email); return fetch(‘http://example.com/api/v1/registration’, { method: ‘POST’, body: formData }).then(response => response.json()) } createNewProfile(profile) .then((json) => { // handle success }) .catch(error => error);

How to fetch XML with fetch api

by

Using native DOMParser getCurrentCity(location) can be written: function getCurrentCity(location) { const lat = location.coords.latitude; const lon = location.coords.longitude; return fetch(apis.currentWeather.url(lat, lon)) .then(response => response.text()) .then(str => new window.DOMParser().parseFromString(str, “text/xml”)) .then(data => console.log(data)); }

fetch() does not send headers?

by

The same-origin policy restricts the kinds of requests that a Web page can send to resources from another origin. In the no-cors mode, the browser is limited to sending “simple” requests — those with safelisted methods and safelisted headers only. To send a cross-origin request with headers like Authorization and X-My-Custom-Header, you have to drop … Read more

fetch gives an empty response body

by

I just ran into this. As mentioned in this answer, using mode: “no-cors” will give you an opaque response, which doesn’t seem to return data in the body. opaque: Response for “no-cors” request to cross-origin resource. Severely restricted. In my case I was using Express. After I installed cors for Express and configured it and … Read more

Chrome – Fetch API cannot load file. How to workaround?

by

For chrome you still need –allow-file-access-from-files (and I recommend installing a separate chrome and using it solely for these projects to stay secure), but just shim fetch() for XMLHttpRequest for file:// requests: if (/^file:\/\/\//.test(location.href)) { let path=”./”; let orig = fetch; window.fetch = (resource) => ((/^[^/:]*:/.test(resource)) ? orig(resource) : new Promise(function(resolve, reject) { let request … Read more

Hide 401 console.error in chrome dev tools getting 401 on fetch() call [duplicate]

by

Unfortunately, this cannot be done, as this type of message in the console is printed by chrome itself. Repressing this type of message has been debated for years, but the consensus seems to be that this message is desirable – see this discussion. Just in case you’re interested: As per this comment, the reason we’re … Read more

What causes a Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode error?

by

I believe this is a Chromium bug that has been reported here. Hopefully it will be fixed soon or some more information about the issue will be published. Paul Irish implemented a temporary work around, which is as follows: if (e.request.cache === ‘only-if-cached’ && e.request.mode !== ‘same-origin’) { return; } I ran it inside the … Read more

tech