Ensure that you patiently wait for the axios method to finish execution before moving on to the

Question

Ensure that you patiently wait for the axios method to finish execution before moving on to the

I am currently learning vue.js and struggling with the concept of promises. I need to initialize a variable with data from an API call, but I want to ensure that the Axios call is generic:

{
  data: {
    list: [],
  },
  methods: {
    ShowList: function () {
      return this.Axios_GET('/api/Api_Store').then(items => {
        this.list = items;
      });
    },

    Axios_GET: function (apiurl) {
      // I want this method to be reusable without binding variables inside it
      this.StartProgress();
      axios({ method: 'get', url: apiurl }).then((response) => {
        this.StopProgress();
        return Response.data;

      }).catch((error) => {
        this.StopProgress();
      }).then(function () {

      });
    },
  }
};

However, when I attempt to use ShowList, I encounter the following error:

Error in mounted hook: "TypeError: Cannot read property 'then' of undefined"

I wish to write the ShowList function to retrieve data from the API like this (in theory)

this.list = this.Axios_GET('/api/Api_Store')

Note: The functions StartProgress and StopProgress are already defined and operational.

javascript vue.js promise axios

Answer 1

Answer №1

{
  info: {
    items: [],
  },
  actions: {
    DisplayItems: function () {
      return this.RequestData('/api/Api_Store').then(items => {
        this.items = items;
      });
    },

    RequestData: function (apiurl) {
      // This method is designed to be reusable and not require variable binding within
      this.StartLoading();
      axios({ method: 'get', url: apiurl }).then((response) => {
        this.StopLoading();
        return response.data; // Modified to use response.data rather than Response.data for consistency

      }).catch((error) => {
        this.StopLoading();
      }).then(function () {

      });
    },
  }
};

Answer 2

{
  info: {
    items: [],
  },
  actions: {
    DisplayItems: function () {
      return this.RequestData('/api/Api_Store').then(items => {
        this.items = items;
      });
    },

    RequestData: function (apiurl) {
      // This method is designed to be reusable and not require variable binding within
      this.StartLoading();
      axios({ method: 'get', url: apiurl }).then((response) => {
        this.StopLoading();
        return response.data; // Modified to use response.data rather than Response.data for consistency

      }).catch((error) => {
        this.StopLoading();
      }).then(function () {

      });
    },
  }
};

Answer 3

Answer №2

Learn how to implement promise chaining in your code.

{
  data: {
    collection: [],
  },
  methods: {
    DisplayCollection: function() {
      return this.FetchData('/api/Api_Store').then(items => {
        this.collection = items || [];
      });
    },

    FetchData: function(apiurl) {
      this.StartLoading();
      return axios({
          method: 'get',
          url: apiurl
        })
        .then(response => response.data)
        .catch((error) => {
          // handle error if necessary;
        }).finally(() => {
          this.StopLoading();
        });
    },
  }
};

Answer 4

Learn how to implement promise chaining in your code.

{
  data: {
    collection: [],
  },
  methods: {
    DisplayCollection: function() {
      return this.FetchData('/api/Api_Store').then(items => {
        this.collection = items || [];
      });
    },

    FetchData: function(apiurl) {
      this.StartLoading();
      return axios({
          method: 'get',
          url: apiurl
        })
        .then(response => response.data)
        .catch((error) => {
          // handle error if necessary;
        }).finally(() => {
          this.StopLoading();
        });
    },
  }
};

Answer 5

Answer №3

Make sure to remove the unnecessary then() function at the end of the axios promise chain and handle errors by using Promise.reject() in the catch block to propagate them. Remember to return the axios promise chain from the function.

If you don't properly handle the error, the promise will be resolved instead of rejected, which can cause issues in your ShowList function.

Check out the revised code below:

{
  data() {
    return {
      list: []
    };
  },
  methods: {
    ShowList: function () {
      return this.Axios_GET('/api/Api_Store').then(items => {
        this.list = items;
      })
      .catch((err) => {
        // Handle errors here (Display a warning or error)
        this.list = [];
      });
    },

    Axios_GET: function (apiurl) {
      
      this.StartProgress();
      
      // Don't forget to RETURN.
      return axios({ method: 'get', url: apiurl }).then((response) => {
        this.StopProgress();
        
        return response.data;
      }).catch((error) => {
        this.StopProgress();

        return Promise.reject(error);
      });
    },
  }
};

Answer 6

Make sure to remove the unnecessary then() function at the end of the axios promise chain and handle errors by using Promise.reject() in the catch block to propagate them. Remember to return the axios promise chain from the function.

If you don't properly handle the error, the promise will be resolved instead of rejected, which can cause issues in your ShowList function.

Check out the revised code below:

{
  data() {
    return {
      list: []
    };
  },
  methods: {
    ShowList: function () {
      return this.Axios_GET('/api/Api_Store').then(items => {
        this.list = items;
      })
      .catch((err) => {
        // Handle errors here (Display a warning or error)
        this.list = [];
      });
    },

    Axios_GET: function (apiurl) {
      
      this.StartProgress();
      
      // Don't forget to RETURN.
      return axios({ method: 'get', url: apiurl }).then((response) => {
        this.StopProgress();
        
        return response.data;
      }).catch((error) => {
        this.StopProgress();

        return Promise.reject(error);
      });
    },
  }
};

Ensure that you patiently wait for the axios method to finish execution before moving on to the

Answer №1

Answer №2

Answer №3

Similar questions

Identifying iOS Opera Mini browsers using JavaScript

Error encountered: Vue.js encountered an unexpected token, which is 'export'

Encountered a Dojo error of "TypeError {stack: (...), message: "undefined is not a function"}" when attempting to display a gif during an ajax load

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

Tips for arranging div elements in a grid-like matrix layout

The website flickers in and out as it loads

Utilize React Native to showcase JSON data in a visually appealing way by organizing it into titles and corresponding lists for both

Obtain the value of a range using JQuery

When trying to submit a form, encountering an `Uncaught ReferenceError` due to calling ajax within

Customize hoverIntent to support touch events on mobile devices

Triggering a dynamically created event with the onchange event

Is it possible for me to generate c3js graphs dynamically?

What could be causing jQuery animate to malfunction on mobile devices when a viewport is present?

Exploring the world of two-dimensional arrays in D3 programming

Ways to update the DOM following modifications to a data attribute

Why do query values disappear when refreshing a page in Next.js? [Illustrative example provided]

The specified timeout elapsed without the jasmine async callback being invoked

The Google map shifts beyond the perceived limits of the world

"Ng-repeat function seems to be malfunctioning, although I am able to view

Accept only requests from my Chrome extension