Warm tip: This article is reproduced from stackoverflow.com, please click
fetch javascript post reactjs

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

发布于 2020-03-27 10:16:00

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;
};
Questioner
Nik Ackermann
Viewed
222
分享
Prince Hernandez 2019-08-11 07:12

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;
    }    

}
gabe 2019-08-11 05:48:51

you can use aawait to read the response stream as well: const data = fetch(url); const json = await data.json();

StangSpree 2020-03-03 01:58:58

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.

Prince Hernandez 2020-03-03 02:06:45

@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

Related issues

1
Send POST data using XMLHttpRequest
2
What's the difference between a POST and a PUT HTTP REQUEST?
3
Sending submit form values from modal to another modal php
4
How to post request dates with react-date-range in React?
5
Angular: Sending POST request with empty request body
6
How does an AWS S3 POST object form initiate an upload
7
OVH "get_version_v3() got an unexpected keyword argument 'auth'"
8
Django return none when y try to save in vars by POST method
9
Get POST request body with express and fetch
10
415 Unsupported Media Type in post request