How to convert axios to fetch?

2021 answer: just in case you land here looking for how to make GET and POST Fetch api requests using async/await or promises as compared to axios.

I'm using jsonplaceholder fake API to demonstrate:

Fetch api GET request using async/await:

 const asyncGetCall = async () => { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'GET', headers: { 'Content-Type': 'application/json' }, }); const data = await response.json(); // enter you logic when the fetch is successful //example: show success modal, clear form, route to another page etc. console.log(data); } catch(error) { // enter your logic for when there is an error, // example: open a modal with error message. console.log(error) } } asyncGetCall() 

Fetch api POST request using async/await:

 const asyncPostCall = async () => { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ // your expected POST request payload goes here title: "My post title", body: "My post content." }) }); const data = await response.json(); // enter you logic when the fetch is successful //example: show success modal, clear form, route to another page etc. console.log(data); } catch(error) { // enter your logic for when there is an error, // example: open a modal with error message. console.log(error) } } asyncPostCall() 

GET request using Promises:

 fetch('https://jsonplaceholder.typicode.com/posts', { method: 'GET', headers: { 'Content-Type': 'application/json', }, }) .then(res => res.json()) .then(data => { // enter you logic when the fetch is successful //example: show success modal, clear form, route to another page etc. console.log(data) }) .catch(error => { // enter your logic for when there is an error, // example: open a modal with error message. console.log(error) }) 

POST request using Promises:

fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ // your expected POST request payload goes here title: "My post title", body: "My post content." }) }) .then(res => res.json()) .then(data => { // enter you logic when the fetch is successful //example: show success modal, clear form, route to another page etc. console.log(data) }) .catch(error => { // enter your logic for when there is an error, // example: open a modal with error message. console.log(error) }) 

GET request using Axios:

 const axiosGetCall = async () => { try { const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') // enter you logic when the fetch is successful // example: show success modal, clear form, route to another page etc. console.log(`data: `, data) } catch (error) { // enter your logic for when there is an error, // example: open a modal with error message. console.log(`error: `, error) } } axiosGetCall() 

POST request using Axios:

const axiosPostCall = async () => { try { const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', { // your expected POST request payload goes here title: "My post title", body: "My post content." }) // enter you logic when the fetch is successful // example: show success modal, clear form, route to another page etc. console.log(`data: `, data) } catch (error) { // enter your logic for when there is an error, // example: open a modal with error message. console.log(`error: `, error) } } axiosPostCall() 

fetch only takes two arguments.

fetch('/api/upload', { method: 'post', body: JSON.stringify(data), headers: { 'accept': 'application/json', 'Accept-Language': 'en-US,en;q=0.8', 'Content-Type': 'multipart/form-data;', }, }) .then(res => res.json()) .then(json => console.log(json));