Scribd
Upload
44 views

Fetch Data APi

This document provides examples of how to make GET and POST requests using the Fetch API in JavaScript. It includes easy examples of getting JSON from a URL and posting JSON, as well as more advanced examples of setting custom headers, handling CORS, uploading files and multiple files. Various methods are demonstrated for encoding the request body depending on the needed Content-Type, such as JSON.stringify, FormData, and URLSearchParams.

Uploaded by

khadija deja
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
44 views

Fetch Data APi

This document provides examples of how to make GET and POST requests using the Fetch API in JavaScript. It includes easy examples of getting JSON from a URL and posting JSON, as well as more advanced examples of setting custom headers, handling CORS, uploading files and multiple files. Various methods are demonstrated for encoding the request body depending on the needed Content-Type, such as JSON.stringify, FormData, and URLSearchParams.

Uploaded by

khadija deja
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

# Fetch API Examples

# ⚠️ _2019-2020:_ [See more examples and updates on my article


here!](https://danlevy.net/you-may-not-need-axios/)

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

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

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

## ~DEPRECATED BELOW~
## Table of Contents

1. GET Requests
1. [Easy: Get JSON from a URL](#easy-get-json-from-a-url)
1. [Intermediate: Custom headers](#intermediate-custom-headers)
1. [Advanced: CORS example](#advanced-cors-example)
1. POST/PUT Requests
1. [Easy: Posting JSON](#easy-posting-json)
1. [Intermediate: Posting an HTML `<form>`](#intermediate-posting-an-html-form)
1. [Intermediate: Form encoded data](#intermediate-form-encoded-data)
1. [Advanced: Uploading Files](#advanced-uploading-files)
1. [Advanced: Uploading Multiple Files](#advanced-uploading-multiple-files)

1. Bonus
1. Dependant Fetch Requests
1. Concurrent Downloads

## GET Requests

### Easy: Get JSON from a URL

```js
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

```js
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.

```js
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

```js
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>`

```js
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`.

```js
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

```js
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:

```html
<input type='file' multiple class='files' name='files' />
```
Then use with something like:

```js
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())
}
```

You might also like