Proper Way to Make API Fetch 'POST' with Async/Await

Question

I'm working on a project that requires me to make requests to an API. What is the proper form for making a POST request with Async/Await?

As an example, here is my fetch to get a list of all devices. How would I go about changing this request to POST to create a new device? I understand I would have to add a header with a data body.

getDevices = async () => {
  const location = window.location.hostname;
  const response = await fetch(
    `http://${location}:9000/api/sensors/`
  );
  const data = await response.json();
  if (response.status !== 200) throw Error(data.message);
  return data;
};

`await` makes no difference to how the `fetch` API works. You make it a post request in the same way as you would with any other use of `fetch`. — Quentin, Apr 26 '18 at 15:31

Prince Hernandez · Accepted Answer · 2019-08-10T23:12:12.253

55

actually your code can be improved like this:

to do a post just add the method on the settings of the fetch call.

getDevices = async () => {
    const location = window.location.hostname;
    const settings = {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        }
    };
    try {
        const fetchResponse = await fetch(`http://${location}:9000/api/sensors/`, settings);
        const data = await fetchResponse.json();
        return data;
    } catch (e) {
        return e;
    }    

}

edited Aug 10 '19 at 23:12

answered Apr 26 '18 at 15:39

Prince Hernandez

3,623
1
10
19

you can use a`await` to read the response stream as well: `const data = fetch(url); const json = await data.json();` – gabe Aug 10 '19 at 21:48
In my case, browser is forcing a pre-flight OPTIONS call prior to POST call. I want something like this to await for both OPTIONS & POST call to finish and return the data from POST call. Thanks for sharing. – StangSpree Mar 02 '20 at 17:58
@StangSpree the preflight call is being done automatically. maybe your backend side is not supporting the call and that could be the reason of the complain of the browser – Prince Hernandez Mar 02 '20 at 18:06

Ali Ankarali · Answer 2 · 2018-10-09T07:30:35.653

Here is an example with configuration:

try {
    const config = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    }
    const response = await fetch(url, config)
    //const json = await response.json()
    if (response.ok) {
        //return json
        return response
    } else {
        //
    }
} catch (error) {
        //
}

score 18 · Answer 3 · answered May 16 '21 at 18:13

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');
                 const data = await response.json();
                // enter you logic when the fetch is successful
                 console.log(data);
               } catch(error) {
            // enter your logic for when there is an error (ex. error toast)
                  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
                 console.log(data);
               } catch(error) {
             // enter your logic for when there is an error (ex. error toast)

                  console.log(error)
                 } 
            }

asyncPostCall()

GET request using Promises:

  fetch('https://jsonplaceholder.typicode.com/posts')
  .then(res => res.json())
  .then(data => {
   // enter you logic when the fetch is successful
    console.log(data)
  })
  .catch(error => {
    // enter your logic for when there is an error (ex. error toast)
   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
    console.log(data)
  })
  .catch(error => {
  // enter your logic for when there is an error (ex. error toast)
   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
              console.log(`data: `, data)
           
            } catch (error) {
    // enter your logic for when there is an error (ex. error toast)
              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
      console.log(`data: `, data)
   
    } catch (error) {
  // enter your logic for when there is an error (ex. error toast)
      console.log(`error: `, error)
    }
  }


axiosPostCall()

Very helpful. Thank you for taking the time to POST this. – sbroways Oct 21 '22 at 13:15 — sbroways, Oct 21 '22 at 13:15

score 2 · Answer 4 · edited Jun 28 '20 at 18:05

2

Remember to separate async/await and then here is an example:

const addDevice = async (device) => {
  const { hostname: location } = window.location;
  const settings = {
    method: 'POST',
    body: JSON.stringify(device),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    }
  }

  const response = await fetch(`http://${location}:9000/api/sensors/`, settings);
  if (!response.ok) throw Error(response.message);

  try {
    const data = await response.json();
    return data;
  } catch (err) {
    throw err;
  }
};

edited Jun 28 '20 at 18:05

Noel Yap

18,822
21
92
144

answered Jul 03 '19 at 13:16

TomasVeras

151
1
5

1

What is the problem if we combining? – Hidayt Rahman May 11 '20 at 05:24
@HidaytRahman check Bergi's answer on this topic https://stackoverflow.com/a/54387912/2971063 – TomasVeras May 12 '20 at 09:25

Proper Way to Make API Fetch 'POST' with Async/Await

4 Answers4

Linked