feature request - debounce asyncComputed

It would be nice to be able to define a computed function which waits for 0 or more milliseconds before issuing the compute request, and provides various options for what happens if subsequent requests arrive during that delay.

I’m using asyncComputed currently with fetch, but I want to throttle the number of fetch requests being made, and show a “working…” temporary output or something.

Thanks!

[foxbenjaminfox]

That does indeed sound like a useful thing to be able to do.

I don’t think you need any particular help from this plugin to do it though. Already, you can write something like this, using any promise-based debounce, for instance as provided by the debounce-promise package:

const debounce = require('debounce-promise')

new Vue({
  asyncComputed: {
    myProperty: debounce(function () {
      // The function body, which returns a promise
    }, 100)
  }
}

Debouncing the function passed to vue-async-computed does not require any particular changes to the plugin.

On the other hand, I don’t know off the top of my head of a simple way to do what you want with regards to showing the placeholder value while the debouncing is going on. It is true that it seems like that could be a useful feature. That said, it’s more a feature for a debouncing library than for this plugin directly. It’s more of a generic debouncing feature than anything specifically to do with Vue.

That said, I’m not against adding that sort of thing if it would simplify matters, although perhaps I’d add it in a separate library as most users of vue-async-computed won’t need it and it would be a shame to bulk vue-async-computed up with things not directly related to Vue.

[geekytime]

I think the debounced function is failing to react because Vue cannot “hear” the the accessors to my other computed values from inside the debounce function wrapper. If I create the debounced function outside the Vue instance, and pass any computed values into the wrapper, it works:

const fetchItems = debounce(function () {
  const response = await api.get({
    url: '/some/url',
    params: this.params
  })
  return response.results
})

const vm = new Vue({
  data: {
    showing: 'all',
    name: '',
  },
  computed: {
    params () {
      return {
        showing: this.showing,
        name: this.name
      }
    }
  },
  asyncComputed: {
    items: {
      default: [],
      lazy: true,
      async get () {
        return fetchItems(this.params)
      }
    }
  }
})