I have a function need to write async but I can't do it the right way. How can I achieve this?

async search (loading, search, vm) {
  let vm = this
  _.debounce(() => {
    let ApiURL = '/users/'
  }

  let { res } = await api.get(ApiURL) //Error
    vm.options = res.data
  }, 800)

I have a function need to write async but I can't do it the right way. How can I achieve this?

async search (loading, search, vm) {
  let vm = this
  _.debounce(() => {
    let ApiURL = '/users/'
  }

  let { res } = await api.get(ApiURL) //Error
    vm.options = res.data
  }, 800)

• javascript
• vue.js
• vuejs2

• 1 don't use then() with async. You already have res you don't need to use then() to get it. – Mark Commented May 19, 2018 at 7:18
• Fixed it. error in await line, bro – KitKit Commented May 19, 2018 at 7:19
• Does this answer your question? How can I debounce using async/await? – mikemaccana Commented Mar 7, 2022 at 17:06
• Assigning the debounce function to a variable should do the trick – Stetzon Commented Jun 24, 2022 at 14:43

2 Answers 2

You should avoid using the debounce function provided by Lodash when dealing with promises since it doesn't distinguish sync and async function and works like if the function you fed it was synchronous. So it doesn't wait till the promise is resolved or rejected and returns immediately. This means that the time spent for, say ajax request, doesn't count towards function execution time, and in case of network delay it's possible for the responses to e in different order.

I suggest to pick up the awesome-debounce-promise on npm.

Just assign the lodash function directly as a ponent method

new Vue({
    el: '#app',
    data: { requests: 0 },


  methods: {
    search: _.throttle(async function () {  
      const res = await fetch('/echo/json/')
      this.requests++
      console.log(res)
    }, 1000)
  },


  created () {
    // 100ms interval but throttle works at 1000ms
    setInterval(() => {
        this.search()
    }, 100)
  }
})

https://jsfiddle/6thcxfym/

In your case:

methods: {
    search: _.debounce(async function () {
      // this code may differ from your actual implementation
      const res = await api.get('/users/')
      this.options = res.data
    }, 1000)
  }
}