axios request return undefined in useEffect

Question

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

I'm Joe Too · Accepted Answer · 2021-08-31 02:21:08Z

3

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.

answered Aug 31, 2021 at 2:21

I'm Joe Too

5,9161 gold badge22 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

axios request return undefined in useEffect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related