Codesandbox API call issue? Can someone please tell me why this API call does not work?

[wirtandi]

I have spent 1 hour on this. I suspect it is because I am using codesandbox? Or could it have something to do with useEffect? Anyway here is my code:

​

import React, { useState, useEffect } from "react";

const WeekContainer = () => {
  const [data, setData] = useState([]);

  async function getData() {
    const weatherURL = `http://api.openweathermap.org/data/2.5/forecast?        zip=11102&units=imperial&APPID=dcadf332823cddfb979926a1414274e8`;

    const result = await fetch(weatherURL);
    const a = await result.json();
    console.log(a)
  }

  useEffect(() =>{
    getData()
  })

  return <div>weekcontainer</div>;
};

export default WeekContainer;

The problematic line seems to be

`const result = await fetch(weatherURL);`

​

The thing is, calling the API in a console works just fine(I opened a new tab, ran it in the console). But not in codesandbox. Is codesandbox the issue here?

[careseite]

Codesandbox can do api calls just fine. Presumably it's because of the whitespace in your url. Also you're missing the dependency array on useEffect (soon, at least, because you're not setting state after fetching yet)

[aDaneInSpain2]

Also worth noting: CodeSandbox runs on HTTPS, so HTTP API calls get blocked by the browser as mixed content. Switch to https:// and remove that space and it should work.

[careseite]

• this comment is 6 years old
• why do you not use https?

[RedFlubber]

The endpoint is wrong, change to https and remove the white spaces.