Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript Fetch API Examples

Fetch API Examples

⚠️ 2019-2020: See more examples and updates on my article here!

https://danlevy.net/you-may-not-need-axios/

=====================================================

=====================================================

DEPRECATED BELOW

Table of Contents

  1. GET Requests

    1. Easy: Get JSON from a URL
    2. Intermediate: Custom headers
    3. Advanced: CORS example
  2. POST/PUT Requests

    1. Easy: Posting JSON
    2. Intermediate: Posting an HTML <form>
    3. Intermediate: Form encoded data
    4. Advanced: Uploading Files
    5. Advanced: Uploading Multiple Files
  3. Bonus

    1. Dependant Fetch Requests
    2. Concurrent Downloads

GET Requests

Easy: Get JSON from a URL

fetch('https://api.github.com/orgs/nodejs')
.then(response => response.json())
.then(data => {
  console.log(data) // Prints result from `response.json()` in getRequest
})
.catch(error => console.error(error))

Intermediate: Custom headers

fetch('https://api.github.com/orgs/nodejs', {
  headers: new Headers({
    'User-agent': 'Mozilla/4.0 Custom User Agent'
  })
})
.then(response => response.json())
.then(data => {
  console.log(data)
})
.catch(error => console.error(error))

Advanced: CORS example

CORS is primarily checked at the server - so make sure your configuration is correct on the server-side.

The credentials option controls if your cookies are automatically included.

fetch('https://api.github.com/orgs/nodejs', {
  credentials: 'include', // Useful for including session ID (and, IIRC, authorization headers)
})
.then(response => response.json())
.then(data => {
  console.log(data) // Prints result from `response.json()`
})
.catch(error => console.error(error))

POST/PUT Requests

Easy: Posting JSON

postRequest('http://example.com/api/v1/users', {user: 'Dan'})
  .then(data => console.log(data)) // Result from the `response.json()` call
  .catch(error => console.error(error))

function postRequest(url, data) {
  return fetch(url, {
    credentials: 'same-origin', // 'include', default: 'omit'
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: JSON.stringify(data), // Coordinate the body type with 'Content-Type'
    headers: new Headers({
      'Content-Type': 'application/json'
    }),
  })
  .then(response => response.json())
}

Intermediate: Posting an HTML <form>

postForm('http://example.com/api/v1/users')
  .then(data => console.log(data))
  .catch(error => console.error(error))

function postForm(url) {
  const formData = new FormData(document.querySelector('form.edit-user'))

  return fetch(url, {
    method: 'POST', // or 'PUT'
    body: formData  // a FormData will automatically set the 'Content-Type'
  })
  .then(response => response.json())
}

Intermediate: Form encoded data

To post data with a Content-Type of application/x-www-form-urlencoded we will use URLSearchParams to encode the data like a query string.

For example, new URLSearchParams({a: 1, b: 2}) yields a=1&b=2.

postFormData('http://example.com/api/v1/users', {user: 'Mary'})
  .then(data => console.log(data))
  .catch(error => console.error(error))

function postFormData(url, data) {
  return fetch(url, {
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: new URLSearchParams(data),
    headers: new Headers({
      'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
    })
  })
  .then(response => response.json())
}

Advanced: Uploading files

postFile('http://example.com/api/v1/users', 'input[type="file"].avatar')
  .then(data => console.log(data))
  .catch(error => console.error(error))

function postFile(url, fileSelector) {
  const formData = new FormData()
  const fileField = document.querySelector(fileSelector)
  
  formData.append('username', 'abc123')
  formData.append('avatar', fileField.files[0])

  return fetch(url, {
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: formData  // Coordinate the body type with 'Content-Type'
  })
  .then(response => response.json())
}

Advanced: Uploading multiple files

Setup a file upload element with the multiple attribute:

<input type='file' multiple class='files' name='files' />

Then use with something like:

postFile('http://example.com/api/v1/users', 'input[type="file"].files')
  .then(data => console.log(data))
  .catch(error => console.error(error))

function postFile(url, fileSelector) {
  const formData = new FormData()
  const fileFields = document.querySelectorAll(fileSelector)

  // Add all files to formData
  Array.prototype.forEach.call(fileFields.files, f => formData.append('files', f))
  // Alternatively for PHP peeps, use `files[]` for the name to support arrays
  // Array.prototype.forEach.call(fileFields.files, f => formData.append('files[]', f))
  
  return fetch(url, {
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: formData  // Coordinate the body type with 'Content-Type'
  })
  .then(response => response.json())
}
@pom421

This comment has been minimized.

Copy link

commented Nov 3, 2018

Thanks for the reminder ! :)

May be you can remove the comment on body: formData // Coordinate the body type with 'Content-Type' since you said above that FormData will set the body for us.

Anyway, great to have all this examples in one place!

@josecalvillob

This comment has been minimized.

Copy link

commented Dec 9, 2018

I included credentials: 'include' and I still got and error saying "blocked by CORS"

Any idea on why that is happening?

@tural-esger

This comment has been minimized.

Copy link

commented Feb 20, 2019

I included credentials: 'include' and I still got and error saying "blocked by CORS"

Any idea on why that is happening?

use credentials: "same-origin"

@NourSoltany

This comment has been minimized.

Copy link

commented Mar 26, 2019

👍

@AlexOldest

This comment has been minimized.

Copy link

commented Apr 5, 2019

Thank you. It works great with JSON files. I can't deduce how to get XML content out of the response object.

@mylesluke

This comment has been minimized.

Copy link

commented Jun 23, 2019

I included credentials: 'include' and I still got and error saying "blocked by CORS"
Any idea on why that is happening?

use credentials: "same-origin"

Try implimenting this before the URL: https://cors-anywhere.herokuapp.com/

@justsml

This comment has been minimized.

Copy link
Owner Author

commented Jun 24, 2019

@mylesluke your server must support cookies as well. There's a specific 'credentials' header it needs to send... Also, per the spec, you cannot use a wildcard '*' domain if you configure credentials.

@justsml

This comment has been minimized.

Copy link
Owner Author

commented Jun 24, 2019

@AlexOldest You can always use res.text() instead of the res.json().
Here's the API documentation: https://developer.mozilla.org/en-US/docs/Web/API/Response

@justsml

This comment has been minimized.

Copy link
Owner Author

commented Jun 24, 2019

From @tural-esger

I included credentials: 'include' and I still got and error saying "blocked by CORS"
Any idea on why that is happening?

use credentials: "same-origin"

Your server must support 'cookies' CORS config as well.
There's a specific 'credentials' header it needs to send ... Also, per the spec, you cannot use a wildcard '*' domain if you configure credentials.

@carrieaz

This comment has been minimized.

Copy link

commented Aug 28, 2019

In the uploading file section, when uploading one file in <input type='file' ..>, you used example code: formData.append('avatar', fileField.files[0]), what the HTML line for it look like? what is 'avatar' and 'files' in the tag? Thanks!

@justsml

This comment has been minimized.

Copy link
Owner Author

commented Sep 1, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.