Develop Reference

Fetch Location using google Api

I am trying to get the latitude and longitude of user location using google api
I have tried doing this using the fetch method in javascript but I do not get any response. There's no error or anything.
The documentation says to fetch it this way:
https://www.googleapis.com/geolocation/v1/geolocate?key=MY_API_KEY
How I fetch it:
const res = await fetch(https://www.googleapis.com/geolocation/v1/geolocate?key=MY_API_KEY)
const response = await res.json()
When I first did it like above I got an error because it returned nothing which I found out after console.logging res.text()
I do not know what I'm doing wrong In the documentation they equally said something about including Request body but it's optional, So I have no need to include it. Please do you have any ideas on what I'm doing wrong?

I believe you need to send this as a POST request according to the documentation you linked. By default fetch sends a GET request.
To do that you just need to pass in the request type to the fetch function
const response = await fetch(<URI>,{method:'POST'});
const res = await response.json()
console.log(res)

Why am I getting generic "TypeError: Failed to fetch" errors?

When fetching from some APIs, I get TypeError: Failed to fetch errors.
For example, the URL used in the snippet below is an example provided by an API provider. It can be accessed without a key. It works fine in my browser but will throw an error in my code.
Fetching from another public API, https://api.punkapi.com/v2/beers/random, works perfectly.
What is the difference between these APIs that prevents me fetching from some and works for others others?
export default function App() {
useEffect(() => {
fetch(
'https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=439d4b804bc8187953eb36d2a8c26a02'
)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
console.error(error);
});
}, []);
return null;
}

you can't get data from samples
caused API is blocked due to CORS header ‘Access-Control-Allow-Origin’ missing
you need to generate api key(https://openweathermap.org/price) and connect to api
//ex:
api.openweathermap.org/data/2.5/weather?appid={your api key}&....

Javascript File Download issue, returning strange string

I have the following HTTP Axios getcall that should result the browser to force a download but I get the a strange result instead.
AXIOS Call
axios.get('http://localhost:63464/api/Consumer/ExcelDownload')
.then(res => {
return res.data;
})
.then(res =>
{
console.log(res);
})
.catch(err =>
{
console.log(err)
})
Which is returning the following result from the line in console.log(res);
Result of console.log(res.data) image Here
I was doing the following in the past to get this to work.
location.href = 'http://localhost:63464/api/Consumer/ExcelDownload';
which would return my File result.
however this route is now protected using a JWT which I have set in axios global headers, so this is no longer working for me.
Would someone be able to help me with this issue?
perhaps even being able to create some kind of URL from a blob that I can make the same call to.

How to log the AWS Amplify API.get request to view queryStringParameters on url

I'm not sure how to log / see the actual request that is being made.
I can look at this code below and assume that it's http://myendpoint.com?my/path?param=value, however with more complex code and variables in other places, how can I tell what exactly is getting called via API.get?
The main reason I ask is because I don't think my query parameters are being appended to my request, and I'm hoping to confirm.
const apiName = 'http://myendpoint.com'
const path = '/my/path'
const myInit = {
queryStringParameters: {
param: 'value'
}
}
API.get(apiName, path, myInit)
.then((response) => {
console.log('> > > PLEASE TELL ME HOW TO LOG THE REQUEST < < <')
resolve(response)
},
(err) => {
console.log('err resp', err)
resolve(err)
})
Edit: FYI this is in a REACT NATIVE project, so things like the Chrome Network tab are of no use unfortunately.

Okay, I actually think I figured this out, and it boiled down to two different things:
1. ADDING THE AMPLIFY LOGGER:
I found there is an Amplify logger via:
https://github.com/aws/aws-amplify/blob/master/media/logger_guide.md
So I added:
Amplify.Logger.LOG_LEVEL = 'DEBUG'
and now when I am debugging in VS Code I'm seeing the request URL being logged.
2. REALIZING 'queryStringParameters' ISN'T ACTUALLY SUPPORTED: .
I was looking through the Amplify GitHub repo issues and found out that queryStringParameters isn't actually supported yet, which is fun.
URL to issue: https://github.com/aws/aws-amplify/issues/127 .
So instead I appended all my query parameters onto the path, and that works:
const apiName = 'http://myendpoint.com'
const path = `/my/path?param=${value}`
API.get(apiName, path)
.then((response) => {
resolve(response)
},
(err) => {
console.log('err resp', err)
resolve(err)
})
I am now seeing the request URL logged, and seeing the parameters as a part of the request.

React Native Fetch won't execute

I've spent several hours trying to figure out how to query an API using fetch, but I can't even seem to get the fetch command to execute.
I'm very new to Javascript so hopefully someone can just point out some dumb mistake because I can't even get past the first step of using fetch.
Here is the very small snippet of code that I can't get to work.
var req = new Request('http://myapp.com:8000/api/posts', {method: 'GET'});
console.log("1");
fetch(req).then(function(res) {
console.log("2");
return res.json();
})
console.log("3");
The console logs "1", and "3", every time, but "2" is never even logged.
Does anyone know what is going on?
Also, I am making fetch requests to a locally running django server, and from monitoring the the server no requests are even being made to the server when I run my react-native app.

Try using fetch directly, see how it is done on the Networking page:
var url = 'http://myapp.com:8000/api/posts';
console.log("1");
fetch(url).then(function(res) {
console.log("2");
return res.json();
})
console.log("3");

Here is another way you can fetch data
fetch("http://date.jsontest.com/")
console.log("1");
.then((response) => response.json())
.then((responseData) => {
console.log("2");
this.setState({date: responseData.date});
})
.done();
}

Try adding a catch to check if there is any error.
fetch(url).then(function(res) {
console.log("2");
return res.json();
}).catch((error) => {
console.error(error);
});