0

I do have a simple fetch API call inside a React useEffect hook that works just fine:

useEffect(() => {
    (async () => {
      const foo = (await (await fetch('/api/foo')).json())
    })()
}, []);

I am now trying to rewrite this api call using axios but all I get is...nothing. Here is one way I tried:

axios.get('/api/foo')
.then((res) => {
  console.log(res);
}).catch((error) => {
  console.log(error);
});

Nothing happens, neither the res nor the error get logged in the console.

The funky thing though is that other (!) api urls work using axios. It is just this one request that leads to nothing?! What could be the problem here?

PS: In Postman, the /api/foo request returns a result (some json) just fine which makes it even more odd.

PPS: Even with Axios code generated directly from Postman nothing gets returned...?!!!

PPPS: When I look at the Promise that gets returned it keeps hanging in the "pending" state forever and does not get fulfilled.

nerdess
  • 10,051
  • 10
  • 45
  • 55

1 Answers1

0

Did you set the default url? Try axios.defaults.baseURL = 'https://api.example.com'; and then try:

axios.get('/api/foo')
.then((res) => {
  console.log(res);})
.catch((error) => {
  console.log(error);});
Rodrigo
  • 26
  • 1
  • the api runs on the same url as the website (http://localhost:3000) so I can't see how this would make a difference – nerdess Feb 11 '22 at 19:50