Home / Questions / 455149
Accepted
Claudio
Asked: 2022-05-27 08:57:17 +0800 CST 2022-05-27 08:57:17 +0800 CST

Why do I get as a result [[PromiseResult]] = undefined

  • 772

I have a class where with axios I make requests to the server. The idea is to call this class from my Home component and implement its methods , such as the getOperations method to obtain all the operations of a user. but by console I get this:

enter image description here

Here is the OperationsService class to make the request to the server.

import axios from "axios";

class OperationsService{

    async getOperations() {
        
        //return Promise.resolve(this.items);
        try {
            const data = await axios
              .get("http://localhost:4000/api/operations/user/[email protected]")
              .then((res) => {
                return (res.data);
              });
          } catch (e) {
            alert("Error al intentar obtener las operaciones");
          }       
    }

}

export default OperationsService;

Here is the Home component where I call the OperationsService class .

import React from "react";
import axios from "axios";
import OperationsService from "./../../operationsService"

const Home = () => {
    React.useEffect(() => {
    getOperations();
  }, []);

   const getOperations = async () => {
    let operationsService = new OperationsService();
    const data = operationsService.getOperations();
    console.log(data);
   }

}

reactjs

1 Answers

  1. Best Answer

    It can be the configuration async/awaitof axiosin the class OperationsService.

     //el resultado va en data, pero no se esta regresando
 const data = await axios
              .get("http://localhost:4000/api/operations/user/[email protected]")
              .then((res) => {
                return (res.data);
              });

    Assuming the API endpoint returns a key data, you can try the following:

    import axios from "axios";

class OperationsService{

    async getOperations() {
        
        //return Promise.resolve(this.items);
        try {
              const {data} = await axios({
                method: "get", 
                url: "http://localhost:4000/api/operations/user/[email protected]",
                responseType: "json"
                });
    
              return data;

          } catch (e) {
            alert("Error al intentar obtener las operaciones");
          }       
    }

}

export default OperationsService;

    In the component Home:

    const Home = () => {
   useEffect(() => {
    getOperations();
  }, []);

  const getOperations = async () => {
    let operationsService = new OperationsService();
    const data = operationsService.getOperations();
    data.then(res => console.log(res));
    console.log(data);
  }

   return null;
}

    Hope this answer is helpful.

    • 1