axios.get consistently delivers a Promise of type <Pending>

Question

axios.get consistently delivers a Promise of type <Pending>

I have been searching for a solution to my issue, but so far none of the suggestions have worked for me. Below is the code that I am struggling with:

const Element = () => {
        async function getEndData() {
            const data = (await getEnd());
            return data;
        }
}

const getEnd = async () => {
    return await axios.get('http://localhost:8080/end').then(res => res.data);
}

Every time I call getEndData(), it always returns a Promise "pending" with the value I need inside a [[PromiseResult]]. I even tried calling getEnd() directly without using then() and only returning the data, but still no luck. When I print res.data in the console log, it shows the correct value that I need.

javascript typescript axios

Answer 1

Answer №1

This is a possible solution:

function Component() {
  async function fetchEndData() {
    const data = await fetchData();
    return data;
  }
}

async function fetchData() {
  const response = await axios.get('http://localhost:8080/data');
  return response;
}

Answer 2

This is a possible solution:

function Component() {
  async function fetchEndData() {
    const data = await fetchData();
    return data;
  }
}

async function fetchData() {
  const response = await axios.get('http://localhost:8080/data');
  return response;
}

Answer 3

Answer №2

Perhaps there is a better approach to tackle this issue. Consider the following solution:

const Element = () => {
        return async function retrieveEndData() {
            const data = await fetchEnd();
            return data;
        }
}

const fetchEnd = () => {
    return new Promise((resolve, reject) => {
     axios.get('http://localhost:8080/end')
     .then(res => {
      resolve(res.data)
     })
     .catch(err => {
         reject(err);
      })
    }) 
}

Additionally, it seems the element function serves no purpose if it does not have a return value.

Answer 4

Perhaps there is a better approach to tackle this issue. Consider the following solution:

const Element = () => {
        return async function retrieveEndData() {
            const data = await fetchEnd();
            return data;
        }
}

const fetchEnd = () => {
    return new Promise((resolve, reject) => {
     axios.get('http://localhost:8080/end')
     .then(res => {
      resolve(res.data)
     })
     .catch(err => {
         reject(err);
      })
    }) 
}

Additionally, it seems the element function serves no purpose if it does not have a return value.

Answer 5

Answer №3

When using getEndData(), make sure to handle the returned promise properly by either using await or then.

// const Element = () => {
    async function getEndData() {
        const data = (await getEnd());
        return data;
    }
// }

const getEnd = async () => {
    return await axios.get('http://localhost:8080/end').then(res => res);
}



async function callEndData(){
    let x = await getEndData()
    console.log(x)
}
callEndData()

If you encounter a 'promise pending' message, it means you are not correctly handling the promise being returned.

Consider if you really need the Element() function and how you can efficiently retrieve data from the response.

You can modify your code structure to combine Element function and data retrieval like this:


const Element = async() => {
    async function getEndData() {
       return await getEnd();
    }

    let fromEndData  = await getEndData()
    return fromEndData 
}

const getEnd = async () => {
    return axios.get('http://localhost:8080/end').then(res => {
       return res.data
    });
}



async function callEndData(){
    let x = await Element()
    console.log(x)
}
callEndData()

The value being passed is displayed in the console.log(x) statement.

Answer 6

When using getEndData(), make sure to handle the returned promise properly by either using await or then.

// const Element = () => {
    async function getEndData() {
        const data = (await getEnd());
        return data;
    }
// }

const getEnd = async () => {
    return await axios.get('http://localhost:8080/end').then(res => res);
}



async function callEndData(){
    let x = await getEndData()
    console.log(x)
}
callEndData()

If you encounter a 'promise pending' message, it means you are not correctly handling the promise being returned.

Consider if you really need the Element() function and how you can efficiently retrieve data from the response.

You can modify your code structure to combine Element function and data retrieval like this:


const Element = async() => {
    async function getEndData() {
       return await getEnd();
    }

    let fromEndData  = await getEndData()
    return fromEndData 
}

const getEnd = async () => {
    return axios.get('http://localhost:8080/end').then(res => {
       return res.data
    });
}



async function callEndData(){
    let x = await Element()
    console.log(x)
}
callEndData()

The value being passed is displayed in the console.log(x) statement.

axios.get consistently delivers a Promise of type <Pending>

Answer №1

Answer №2

Answer №3

Similar questions

Upgrade the WordPress light editor to the advanced version

What is the best way to use JavaScript to click on a block and retrieve its attribute value?

Checkbox inputs with activated labels causing double events to fire

Ensured static element-UI table dimensions even with modifications to columns

Add some texture to one side of the quadrilateral

It is impossible to add a new element between two existing elements that share the same parent

Issue with Datepicker validation in Angular 5 and Angular Material

Google Tag Manager experiencing issues with retrieving dataLayer variable, showing as undefined

Encountering a node.js issue

Deduce the generic types of conditional return based on object property

Ensure that text is aligned alongside an image only when both elements are enclosed within <p> tags

Adjust the minimum height and width when resizing the window

What is the proper way to specify the type for the iterable response of Promise.all()?

Troubleshoot: Dropdown menu in Materialize not functioning (menu fails to drop down

What are some techniques for applying CSS styling directly to a custom element?

Development of a chart application involving frontend and backend components, utilizing chartjs for data visualization, mongodb for storage

Issue with Angular 7 Universal: components inside are failing to display

Experiencing difficulties with a click event function for displaying or hiding content

Exploring the principles of object-oriented design within the context of Node

Refreshing Child's Activities