Написать асинхронную функцию с Lodash в компоненте Vuejs

Question

Мне нужно написать асинхронную функцию, но я не могу сделать это правильно.Надеюсь, ваши ребята помогут.

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

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

Answer 1

Вы должны избегать использования функции debounce, предоставляемой Lodash, при работе с обещаниями, так как она не различает синхронизирующую и асинхронную функции и работает так, как если бы функция, которую вы передавали, была синхронной.Таким образом, он не ждет, пока обещание будет решено или отклонено и сразу же возвращается.Это означает, что время, потраченное, скажем, на запрос ajax, не учитывается во время выполнения функции, и в случае сетевой задержки ответы могут приходить в другом порядке.

Я предлагаю забрать awesome-debounce-обещание на npm.

Answer 2

Просто назначьте функцию lodash напрямую как метод компонента

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.net/6thcxfym/

В вашем случае:

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