'Vue with axios need 5 to 7 seconds for api call with small data

Good day,

I have quite a problem with my VUE application, namely my API calls are very very slow.

I have a Laravel backend that provides the data in a timely manner, which responds accordingly via a domain https://api.example.com.

However, with my dashboard, where I make three API calls, it takes me between 5 and 8 seconds for the content to load: enter image description here

As a result, users complain massively about the loading times. In the code, I currently call the calls as follows:

  async mounted() {
    this.personalDeletegatesId = userInfo.user.delegatesid
    this.getTasks()
    this.getAddresses()
    this.getRequestTypes()
  },

The functions were each created as an async method. Neither in production nor in local is the application fast.

    getAddresses: async function () {
      this.$http.get('/addresses/delegates/' + userInfo.user.delegatesid)
          .then(function (response) {
            this.items = uniqueElementsBy(response.data[0], (a, b) => a.id == b.id)
            this.itemsnotasks = uniqueElementsBy(response.data[1], (a, b) => a.id == b.id)
            this.itemsfav = uniqueElementsBy(response.data[2], (a, b) => a.id == b.id)
            this.getCounts()

            }.bind(this))
    },
    getTasks: async function () {
      this.$http.get('/salestasks/delegates/' + userInfo.user.delegatesid)
          .then(function (response) {
            this.itemsTasks = uniqueElementsBy(response.data, (a, b) => a.salestasks_id == b.salestasks_id)
          }.bind(this))
    },


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source