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

只需将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)
  }
}

Answer 2

在处理Promise时，应避免使用Lodash提供的debounce函数，因为它不能区分sync和async函数，并且其工作方式类似于您提供的函数是同步的。因此，它不会等到诺言被兑现或被拒绝并立即返回。这意味着花在ajax请求上的时间不计入函数执行时间，并且在网络延迟的情况下，响应可能会以不同的顺序出现。

我建议在npm拿起awesome-debounce-promise。

在Vuejs组件中使用Lodash编写异步函数

2 个答案: