The result from Axios yields an [object Promise]

Question

The result from Axios yields an [object Promise]

Utilizing the Flickr API, I am receiving feed images from their platform.

In my Vue application, I have a computed property called filteredImages:

computed: {
filteredImages: async function() {
  return axios.get('https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=' + this.search + '&nojsoncallback=1')
  .then(function (response) {
    return response.data.items;
  })
}

},

When I use a console log to check the response.data.items, it correctly shows the expected result set. However, when I try to display it in HTML, it shows as [object Promise].

For a demonstration, feel free to view this Pen.

Any insights on why this might be happening?

javascript vue.js axios computed-properties

Answer 1

Answer №1

When dealing with computed props, it's important to note that they do not work well with async functions. Instead, they depend on other reactive props to calculate them when needed. Therefore, the best approach is to call the async function whenever you require filtered images and then store the results in a reactive property within the data section.

Answer 2

When dealing with computed props, it's important to note that they do not work well with async functions. Instead, they depend on other reactive props to calculate them when needed. Therefore, the best approach is to call the async function whenever you require filtered images and then store the results in a reactive property within the data section.

Answer 3

Answer №2

One way to fetch data from an HTTP call and display it in the DOM is by following this example

new Vue({
    el: "#app",
    data: {
        search: "",
        filteredImages: "",
    },
    watch: {
        search: function (newVal, oldVal) {
            this.getItems();
        },
    },
    methods: {
        getItems: async function () {
            try {
                const { data } = await axios.get(
                    `https://api.flickr.com/services/feeds/photos_public.gne?format=jsonp&tags=${this.search}&nojsoncallback=1`
                );

                this.filteredImages = JSON.stringify(data.items)
            } catch (error) {
                console.error(error);
                this.filteredImages = error.toString();
            }
        },
    },
});

However, there is a reported issue with flickr using JSONP which axios or fetch do not support

To handle this, you can use the JSONP module

Answer 4

One way to fetch data from an HTTP call and display it in the DOM is by following this example

new Vue({
    el: "#app",
    data: {
        search: "",
        filteredImages: "",
    },
    watch: {
        search: function (newVal, oldVal) {
            this.getItems();
        },
    },
    methods: {
        getItems: async function () {
            try {
                const { data } = await axios.get(
                    `https://api.flickr.com/services/feeds/photos_public.gne?format=jsonp&tags=${this.search}&nojsoncallback=1`
                );

                this.filteredImages = JSON.stringify(data.items)
            } catch (error) {
                console.error(error);
                this.filteredImages = error.toString();
            }
        },
    },
});

However, there is a reported issue with flickr using JSONP which axios or fetch do not support

To handle this, you can use the JSONP module

Answer 5

Answer №3

To optimize this process, consider placing the results of your computed function in the mounted section. Instead of using return response.data.items, try storing the data in a variable like so:

data() {
    return {
        items: null,
    }
},
mounted:{
    let vm = this;
    axios.get('https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=' 
    + this.search + '&nojsoncallback=1')
      .then(function (response) {
            vm.items = response.data.items;
      })
 }

Now, you can easily access items in your HTML once it's loaded and ready for display.

Answer 6

To optimize this process, consider placing the results of your computed function in the mounted section. Instead of using return response.data.items, try storing the data in a variable like so:

data() {
    return {
        items: null,
    }
},
mounted:{
    let vm = this;
    axios.get('https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=' 
    + this.search + '&nojsoncallback=1')
      .then(function (response) {
            vm.items = response.data.items;
      })
 }

Now, you can easily access items in your HTML once it's loaded and ready for display.

The result from Axios yields an [object Promise]

Answer №1

Answer №2

Answer №3

Similar questions

Transforming the string attribute of an object within a JavaScript array through mapping

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

The error message "app.use() function requires middleware function" appears when the app

What is the solution for changing image sources dynamically in React-Native?

Hiding Bootstrap Popover When User Clicks Outside of it

There was an issue with the rendering: "TypeError: Unable to access the property 'text' because it is undefined"

Combine several items to form a single entity

My attempts to utilize AJAX to execute a php function have been unsuccessful

Simultaneous Push and Insert operations with Vue.js and PHP

Ways to correctly import various CSS files for individual routes in a Vuejs application

The localhost server in my Next.js project is currently not running despite executing the 'npm run dev' command. When trying to access the site, it displays an error message saying "This site can't be

Unexpected quirks in Canvg conversion: Strange behavior observed while utilizing a fill URL

There was a problem encountered while running a GitHub code that was last updated on January 10, 2023

What steps do I need to follow to execute React/Next code that I have downloaded from GitHub?

Design a TypeScript interface inspired by a set static array

Develop a PDF generator in ReactJS that allows users to specify the desired file name

utilizing numerous conditional renderings within a mapping function

The radio button functionality is not functioning properly as intended

Utilizing Bootstrap Modal functionality in a Django web application to enhance user experience

What could be causing my React Router component to display incorrect styling?