Getting no response calling API using axios in React

Question

I'm quite new to React and I'm trying to get a response from weatherapi.com. However I haven't been very successful. The following is my code snippet:

const api_call = async () => {
    const url = 'https://api.weatherapi.com/v1/current.json?key=' + API_KEY + '&q=Singapore'
    const request = axios.get(url)
    const response = await request
    console.log('url - ' + url)
    console.log('request - ' + request)
    console.log('response - ' + response)
}
useEffect(() => {
    api_call()
}, [])

the console log that was printed (i had to redact the API Key) :

url - https://api.weatherapi.com/v1/current.json?key=xxxxxxxxxx&q=Singapore 
request - [object Promise] 
response - [object Object]

I went to the link next generated, and it did show the data I want in the browser.

My axios version is 0.21.1 if it helps.

Now, I want the response to be printed in the console just so I can make sure that I actually got the response. Did I miss something? Thanks beforehand.

Rob Terrell · Accepted Answer · 2020-12-23 19:08:35Z

1

   const api_call = async () => {
    try {
      const url =
        "https://api.weatherapi.com/v1/current.json?key=" +
        API_KEY +
        "&q=United States";
      const request = await axios.get(url);
      console.log(request.data);
    } catch (err) {
      console.log(err.message, "+", err.code);
    }
  };
  useEffect(() => {
    api_call();
  }, []);

you needed to access the data object from the axios request, you shouldn't have to stringify the response like you stated below

answered Dec 23, 2020 at 19:08

Rob Terrell

2,5574 gold badges21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yuuko · Accepted Answer · 2020-12-23 19:12:07Z

0

request and response are objects. Passing a string + object to console.log will cast the object to a string. So if you want to print the content of the object, you should use console.log like this

console.log('response -', response)

answered Dec 23, 2020 at 19:12

Yuuko

163 bronze badges

Comments

pastasauce · Accepted Answer · 2020-12-23 18:58:05Z

0

This was a bad question. What happened was not that I got no response, but that the response wasn't a string (it was a JSON).

I used JSON.stringify() to turn it into string.

answered Dec 23, 2020 at 18:58

pastasauce

6511 gold badge5 silver badges8 bronze badges

Comments

Siddharth Agrawal · Accepted Answer · 2020-12-23 21:15:04Z

0

I think that you are getting the response successfully, but the problem is how you are writing it on console.

console.log('response -' + response)

In above console.log, the response object will be convert to a string(since you are trying to concatenate it with a string), so that is the reason you are seeing that [object object] on console.

Instead use:

console.log('response -', response);

This will give the value of response correctly on console.(Including url, data, status etc)

If you just want data, then use:

console.log('response -', response.data)

answered Dec 23, 2020 at 21:15

Siddharth Agrawal

1163 bronze badges

Collectives™ on Stack Overflow

Getting no response calling API using axios in React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related