Axios get function returns a promise in React

Question

I tried fetching data from a giphy api using the following function and print the returned value to the browser console.

const fetchData = (url) =>
  {
    return axios.get(url).then(res => res.data.data);
  }

  const data = fetchData(giphy_url);
  console.log(`Data: ${data}`);

But on printing the value of the data variable, it prints:

Data: [object Promise]

I want the data in the response to be accessed. Is there something that I am missing?

Answer 1

Axios API calls return a Promise object. From Axios documentation, "Axios is a promise-based HTTP Client for node.js and the browser."

You would need to await on a promise object to access the response value. Note that in order to use await keyword in your function, you would need to mark it as async. Do something like below.

const fetchData = async(url) =>
  {
    return await axios.get(url).then(res => res.data.data);
  }

  const data = fetchData(giphy_url);
  console.log(`Data: ${data}`);