Reputation: 61
I wrote this fonction
fetchWeather(){
axios.get(`http://api.openweathermap.org/data/2.5/forecast/daily?q=${this.state.city},uk&APPID=3a31a881817a041a63eac1c1bbbba705`)
.then((response)=>{
this.setState({report:response.data})
}).catch((error)=>console.log(error))
}
and get this error:
node_modules/axios/lib/core/createError.js:16:24 in createError - node_modules/axios/lib/core/settle.js:19:6 in settle - ... 10 more stack frames from framework internals
Upvotes: 6
Views: 21677
Reputation: 2144
The problem is in the url. CodeSandbox apparently blocks http
requests. Change to https
Upvotes: 2
Reputation: 552
According to the axios GitHub code (axios/lib/core/settle.js):
reject(createError(
'Request failed with status code ' + response.status,
response.config,
null,
response.request,
response
));
The response was rejected because of an invalid status code (most likely an HTML 401). Check if your api key is still valid, or test your URL in postman.
EDIT: Below is a working code snippet based on the new URL
class Hello extends React.Component {
constructor() {
super();
this.state={
report: null,
};
}
componentDidMount() {
axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=3a31a881817a041a63eac1c1bbbba705`)
.then((response)=>{
this.setState({report:response.data});
console.log(response.data);
}).catch((error)=>console.log(error))
}
render() {
return <div>Report: {JSON.stringify(this.state.report)}</div>;
}
}
ReactDOM.render(
<Hello />,
document.getElementById('container')
);
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
</div>
Upvotes: 1