如何在 axios 获得的对象数组中搜索 id？ Vue 2

Question

我正在尝试验证用户是否在我通过 axios 捕获的列表中，问题是我使用了 FILTER 选项，但它总是返回未定义或 []，即如果用户存在于该数组中。

我想不出还能做什么，因为我通过 console.log() 验证它是否是我询问的变量以及它是否带来数据。

    created() {
        this.getStagesDefault()
        this.getSalesman()
        this.getStagesAmountByUser()
    },
    methods: {
        async getSalesman(){
            const { data } = await axios.get('salesman')
            this.employees = data.data
        },
        getStagesAmountByUser(){
            console.log(this.user['id'])
            var objectUser = this.employees.filter(elem => {
                return elem.id === this.user['id']
            })

            console.log(objectUser)
        },

安慰

数据

Answer 1

getSalesman是一个异步方法。 在过滤时，被过滤的数组仍然是空的。

this.getSalesman()            // this runs later
this.getStagesAmountByUser()  // this runs right away

通过等待异步方法让方法按顺序运行：

await this.getSalesman()
this.getStagesAmountByUser()

Answer 2

getSalesman 方法是异步的。 这意味着“getStagesAmountByUser”将在“getSalesman”完成之前开始执行。

解决问题的2种方法：

1. 等待“getSalesman”方法，但您还必须使创建的方法异步。 制作代码如下：

 created: async() =>{ this.getStagesDefault() this.getSalesman() this.getStagesAmountByUser() }

2. 将a.then附加到getSalesman function，然后在.then中启动下一个。 制作代码如下：

 created(){ this.getStagesDefault() this.getSalesman().then( () => this.getStagesAmountByUser()) }

Answer 3

如果您将 id 传递给后端并且仅通过该 id 传递 select，则可以避免低效的客户端过滤。

此外，除非您销毁同样低效的组件，否则 created 只会被调用一次，因此请注意user.id何时更改然后再次调用您的方法。

另外不要忘记您必须将任何异步代码包装在 try/catch 中，否则当找不到用户/推销员等时您将收到未捕获的错误等，您可以将 console.error 替换为告诉用户错误的内容。

 { data: () => ({ employee: {} }), watch: { 'user.id' (v) { if (v) this.getEmployee() } }, created() { this.getEmployee() }, methods: { getEmployee() { if (typeof this.user.id === 'undefined') { return } try { const { data } = await axios.get(`salesman/${this.user.id}`) this.employee = data.data } catch (e) { console.error(e) } } } }