Can API data be accessed using vanilla JS fetch method instead of axios?

[FHossain]

I'm new to HubSpot API and experimenting with making GET and POST requests to the API. With previous projects, I've always used the JS fetch() method, but all of the resources I see provided by HubSpot use nodeJS and Axios to make API requests. 

For example, I have tried testing a simple GET request with the following code:

const url = "https://api.hubapi.com/crm/v3/objects/contacts/{ID}?properties=email&archived=false";
const pat = {PRIVATE_ACCESS_TOKEN};

fetch(url, {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${pat}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({}),
})
  .then(response => response.json())
  .then(console.log(response))
  .catch(err=>{
  console.log("error");
  }
)

Am I doing something wrong syntactically or are these requests not possible with fetch()?

[skimura]

@FHossain 

Hi.

How about remove 'body'? 

...
  headers: {
    'Authorization': `Bearer ${pat}`,
    'Content-Type': 'application/json'
  },
  // remove body.
  //body: JSON.stringify({}),
})
  .then(response => response.json())
...

'body' caused error.

TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

Thanks.

[FHossain]

Hi @skimura ,

Thank you for the suggestion. I have changed the code to the following: 

fetch(url, {
  headers: {
    'Authorization': `Bearer ${pat}`,
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .catch(err=>console.log("error"));

However, I am still receiving "error" in the console. Please let me know if there's any other changes I should try.

[FHossain · Accepted solution]

I was able to create the following with postman, which executed successfully: 

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer PAT");

var raw = JSON.stringify({
  "properties": {
    "email": "example@example.com"
  }
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://api.hubapi.com/crm/v3/objects/contacts", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));