返回语句给出未定义

Question

I am having a function: fetchAll which is in the fetch.js file.

import axios from "../axios";

export default function fetchAll() {
  axios.get("/api/videos/all").then((response) => {
    return response.data;
  });
}

Then in Home.js :

import fetchAll from "../functions/fetch";


 useEffect(() => {
  var videos = fetchAll();
  console.log(videos);
 },[])

But the function returns undefined instead of the data.
Any help is greatly appreciated !

Answer 1

Issue

You are not returning anything from fetchAll function.

export default function fetchAll() {
  axios.get("/api/videos/all").then((response) => {
    return response.data;
  });
  // <-- no return, void return
}

Solution

Return the Promise from axios

export default function fetchAll() {
  return axios.get("/api/videos/all").then((response) => {
    return response.data;
  });
}

You will, of course, need to wait for the Promise to resolve in the useEffect callback.

useEffect(() => {
  const getFetchAll = async () => {
    try {
      const videos = await fetchAll();
      console.log(videos);
    } catch(err) {
      console.error(err);
    }
  }

  getFetchAll();
},[]);