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

【问题标题】：Write async function with Lodash in a Vuejs component在 Vuejs 组件中使用 Lodash 编写异步函数
【发布时间】：2018-10-29 13:45:18
【问题描述】：

我有一个函数需要编写异步，但我不能以正确的方式做到这一点。希望大家帮忙。

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

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

【问题讨论】：

不要将then() 与async 一起使用。您已经拥有res，您无需使用then() 来获取它。
已修复。 await 行中的错误，兄弟

标签： javascript vue.js vuejs2

【解决方案1】：

在处理 Promise 时，您应该避免使用 Lodash 提供的 debounce 函数，因为它不区分同步和异步函数，并且就像您提供给它的函数是同步的一样。所以它不会等到 promise 被解决或拒绝并立即返回。这意味着花在 ajax 请求上的时间不计入函数执行时间，并且在网络延迟的情况下，响应可能以不同的顺序出现。

我建议在 npm 上获取awesome-debounce-promise。

【讨论】：

【解决方案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)
  }
}

【讨论】：

感谢您的反对。投票旨在将答案与其他答案区分开来，以及那些实际上没有回答 OP 问题的人。在撰写此评论时，情况并非如此。不过我采纳了你的建议，谢谢。
诚实投票没有真正的规则。考虑到替代方案，我认为您的原始答案很差，并发布了一个示例来展示您如何改进它。既然你已经这样做了，我将删除反对票和赞成票。
谢谢弗朗多。你的解决方案没问题