Why when processing an event error occurs?

import React from "react";
import Info from "./components/info";
import Form from "./components/Form";
import Weather from "./components/Weather";

const API_KEY = "";

class App extends React.Component {

gettingWeather = async (e) => {
e.preventDefault();
 const api_url = await
fetch(`api.openweathermap.org/data/2.5/weather?q=Kiev ua&appid=${API_KEY}&units=metric`);
 const data = await api_url.json();
console.log(data);
}


render(){
 return (
the <div>
 <Info />
 <Form weatherMethod={this.gettingWeather} />
 <Weather />
</div>
);
}
}

export default App;


Why on button click there is some kind of error? And how to solve it?
March 19th 20 at 08:53
2 answers
March 19th 20 at 08:55
Solution
Maybe we should add something like https:// to the beginning of the url you are trying to make a request?
March 19th 20 at 08:57
Solution
and to catch mistakes is it necessary to wrap in a try catch if you don't want to write fetch().then().catch()

try {
 const api_url = await fetch(`api.openweathermap.org/data/2.5/weather?q=Kiev ua&appid=${API_KEY}&units=metric`);
 const data = await api_url.json();
} catch (err) {
 console.log('some error', err)
}


well, Yes, probably https://api.openweather....

ps / do not forget that in this case, your api key will see all directly in the browser, it is necessary to make a request to the "closed API" on the server side, and react to make a request to your server like fetch('/api/getweather')
OK, thanks for the advice, I'm just starting to learn, React, and kettle) - Rosella.Maggio commented on March 19th 20 at 09:00

Find more questions by tags AJAX