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

How big is the array size in the WebAudio API data?

How can I automatically check all checkboxes in a row when a material table is loaded and uncheck them when clicked?

What is the process for creating a local repository for Node.js npm?

Guide on deleting an element from an object array based on the content of a specific field (resulting in undefined mapping)

Data update using AJAX and codeigniter was unsuccessful

React splits the page and interrupts the scroll event listener

Verifying a checkbox selection within an Autocomplete feature using MUI

obtaining information from newly added form elements in an Angular application

objects bound to knockout binding effects

Unlock the potential of Stripe's confirmCardSetup method when working with multiple elements in Laravel Cashier integrated with a Vue application. Master

When you click on the text, the calendar will pop up for you to

"JQuery's selector is failing to locate elements once they have been loaded through an

Generate an array containing the dates of the past 30 days using Moment.js

Intercepting the K-pager navigation with a pop-up modal for user confirmation before switching to a different page

Tips on adding several elements to an array depending on the selected value from various checkboxes?

Utilizing long polling technique with jQuery/AJAX on the server end

Postponing the execution of a controller until all JSON files have been fully loaded

update and rejuvenate session information using Node.js and express-session

Steps for enabling a feature flag via API in specific environments

Fill a JavaScript array with values inserted in the middle position