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

Converting a JavaScript variable into an xls or csv file

Replace the facebook plugin using JQuery libraries

What is the best way to receive the result of an asynchronous function as an input and showcase it using express?

Navigating additional information in D3 Node Link Force diagram

Troubleshooting the non-functional asynchronous function

How to Implement Jquery Confirm in Laravel Form Opening?

Troubleshooting Bootstrap select box design discrepancies

Successful Ajax response notification

Ways to categorize items using JQuery based on their hierarchical structure

Testing-library does not seem to recognize SFC styles

What is the best way to retrieve a value from a function that contains multiple nested functions in Javascript?

Creating a column that adjusts dynamically in PDFMAKE

When using the Ng --version command on a development package, it throws an error

The OutlinedInput component from Material-UI seems to be struggling to display the startAdornment

Changing colors in the rows of a table

Use RxJS chaining to transform an observable of `File` objects into an observable of strings encoded in base64

Sorting an array of Material-UI's <TableRow> alphabetically using ReactJS and Material-UI. How to do it!

What is the best way to create an array within an object in JavaScript?

Adaptable Image Functionality in Jquery Carousel

Unable to interact with buttons located in the title bar of the Electron application