Fetch JSON with POST method

Ask the community
, ,
1

Hi, I’m struggling to get a function that fetches JSON data from an API endpoint at https://api.postcodes.io using {fetch}. Their documentation requires a JSON object to be passed with the POST request. Below is an example of that object from https://api.postcodes.io documentation.

{
"postcodes" : ["OX49 5NU", "M32 0JG", "NE30 1DP"]
}

My function is as follows, and is stored in the backend (per CORS requirement):

import { fetch } from 'wix-fetch';

export function callAPI() {
 return fetch("https://api.postcodes.io/postcodes", {
 "method": "post",
 "headers": {
   "Content-Type": "application/json"
            },
 "body": {
   "postcodes": ["EH14 4AS", "PE28 4UX"]
            },
        })
        .then((httpResponse) => {
 if (httpResponse.ok) {
 return httpResponse.json();
            } else {
                console.log(httpResponse);
 return Promise.reject("callAPI failed");
            }
        })
        .then((json) => console.log(json.result))
        .catch(err => console.log(err));
}

httpResponse.status is 400, i.e. bad request. I’m not overly familiar with constructing JSON objects or POST requests. I’ve made life difficult for myself because I had GET request working fine for a single postcode!

Any help is greatly appreciated!

2

Please enter the full URL of the JSON files as https://api.postcodes.io/postcodes/EH14%204AS and https://api.postcodes.io/postcodes/PE28%204UX . Also, since this is a fetch from an external resource, I would recommend using get method to fetch the data.

3

Thanks for the reply Sam. I would prefer not to use individual GET fetches because I will always be fetching JSON data for two postcodes. If I used GET, I would have to store and process the JSON from the first response before fetching the second.

Are you able to tell me why my POST fetch is unsuccessful and how I might rectify it? If I were to proceed with a GET approach, how best could I store the first GET fetches response?

4

Possibly the API server also returns a reason that explains what’s wrong with the request.
Try getting and printing the error response body (using https://www.wix.com/corvid/reference/wix-fetch.WixFetchResponse.html#text )