CODEWITHSUNDEEP
javascriptreactjsaxiosreact-hooks
CCCC
CCCC

Reputation: 6461

axios request return undefined in useEffect

When I try to make axios request in useEffect hook, it returns undefined,
but I find it's successful when viewing in Network request in Inspect Mode

api.js

import axios from "axios";

export default axios.create({
  baseURL: `https://jsonplaceholder.typicode.com`
});

PostService.js

import instance from "./api";

export default {
  getPost: () => {
    instance({
      method: "GET",
      url: "/posts"
    })
      .then((res) => {
        return res;
      })
      .catch((err) => {
        return err;
      });
  }
};

App.js

import "./styles.css";
import { useEffect } from "react";

import PostService from "./PostService";

export default function App() {
  useEffect(() => {
    async function fetchData() {
      const response = await PostService.getPost();
      console.log(response); //return undefined
    }
    fetchData();
  }, []);

  return (
   ...
  );
}

CodeSandBox:
https://codesandbox.io/s/happy-leftpad-cz12i?file=/src/App.js

Upvotes: 0

Views: 559

Answers (1)

I'm Joe Too
I'm Joe Too

Reputation: 5840

You're missing a return in your PostService:

import instance from "./api";

export default {
  getPost: () => {
    return instance({
      method: "GET",
      url: "/posts"
    })
      .then((res) => {
        return res;
      })
      .catch((err) => {
        return err;
      });
  }
};

Without the return, PostService is calling the api and fetching the data, but it's not sending anything back to your fetchData function calling it.

Upvotes: 3

Related Questions