Fetch Quick Sheet
=================
Fetch
------------------------------------------------------------------------
### Fetch Quick Sheet
### Fetch
fetch('/data.json')
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(err => ...)
### Response
fetch('/data.json')
.then(res => {
res.text() // response body (=> Promise)
res.json() // parse via JSON (=> Promise)
res.status //=> 200
res.statusText //=> 'OK'
res.redirected //=> false
res.ok //=> true
res.url //=> 'http://site.com/data.json'
res.type //=> 'basic'
// ('cors' 'default' 'error'
// 'opaque' 'opaqueredirect')
res.headers.get('Content-Type')
})
### Request options
fetch('/data.json', {
method: 'post',
body: new FormData(form), // post body
body: JSON.stringify(...),
headers: {
'Accept': 'application/json'
},
credentials: 'same-origin', // send cookies
credentials: 'include', // send cookies, even in CORS
})
### Catching errors
fetch('/data.json')
.then(checkStatus)
function checkStatus (res) {
if (res.status >= 200 && res.status < 300) {
return res
} else {
let err = new Error(res.statusText)
err.response = res
throw err
}
}
Non-2xx responses are still successful requests. Use another function to turn them to errors.
### Using with node.js
const fetch = require('isomorphic-fetch')
See: isomorphic-fetch *(npmjs.com)*
#### If you found this guide helpful feel free to checkout my github/gists where I host similar content:
bgoonz’s gists · GitHub
bgoonz — Overview
Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com
Or Checkout my personal Resource Site:
a/A-Student-Resources
Edit descriptiongoofy-euclid-1cd736.netlify.app
By Bryan Guner on [March 5, 2021](https://medium.com/p/8872650742b4).
Canonical link
Exported from [Medium](https://medium.com) on September 23, 2021.