$emit 在异步方法中 - Vue2

Question

这是我孩子的组件异步方法：

async created () {
  this.$parent.$emit('loader', true)
  await this.fetchData()
  this.$parent.$emit('loader', false)
}

fetchData 执行 axios get 调用，从 API 获取数据。但是，在 vue-devtools（事件选项卡）中，我只能在更改代码并热重新加载后才能看到事件。我还在父组件中设置了console.log()：

mounted() {
  this.$on('loader', (value) => {
    console.log(value)
  })
}

我只能在控制台中看到false。我的目的是将加载器设置为 true（以便我可以显示加载器），然后在获取数据时将其设置为 false。

我的 fetchData 方法：

import http from '@/http'

fetchData() {
  return http.getOffers().then((resp) => {
    this.offersData = resp.data
  })
}

http.js 的内容：

import axios from 'axios'
import config from '@/config'

const HTTP = axios.create({
  baseURL: config.API_URL
})

export default {
  /* calculator */
  getOffers() {
    return HTTP.get('/url')
  }
}

如果我在async created() 中直接使用return axios.get()，那么它可以工作。问题出在这个导入的 http 实例中。

最终解决方案

其中一个问题是使用不同的生命周期，感谢Evan 提到这一点。

另一个问题是 async / await 的使用，更改为 fetchData() 方法：

import http from '@/http'

async fetchData() {
  await http.getOffers().then((resp) => {
    this.offersData = resp.data
  })
}

我必须使这个方法异步并在 axios 请求上使用 await，因为 await 是 thenable，它确实有效。我还在 https.js 中发现了一个问题：

export default {
  /* calculator */
  getOffers() {
    return HTTP.get('/url')
  }
}

它返回HTTP.get()，而不是一个承诺本身，我可以在这里使用then，它会起作用，但是，出于灵活性的目的，我没有这样做。

但是，我仍然不明白为什么它不起作用：

fetchData() {
  return http.getOffers().then((resp) => {
    this.offersData = resp.data
  })
}

它不是已经返回了一个承诺，因为它与 then 链接在一起......所以令人困惑。

再次重新测试，似乎return 工作正常，哈哈。

Answer 1

我只是建议重组你的方法，因为 axios 本身就是异步方法，所以实际上不需要创建异步方法。

如果您已经定义了 fetchData 方法，并且目标是在进行调用时切换加载器状态，那么应该这样做。

fetchData () {
    this.$parent.$emit("loader", true)

    axios.get(url)
        .then(resp => {
            this.data = resp
            this.$parent.$emit("loader", false)
        })
}

当然这些 then 语句可以合并为一个，但思路是一样的。

编辑：（使用父发射函数）

fetchData () {
    this.loader = true

    axios.get(url)
        .then(resp => this.data = resp)
        .then(() => this.loader = false)
}

Answer 2

如果您要达到的目的是告诉直接父级它不再加载，则必须像这样向同一个实例发射

async created () {
  this.$emit('loader', true)
  await this.fetchData()
  this.$emit('loader', false)
}

通过删除$parent，您将从当前组件发出。

--Root
 --My-page.vue
   -Some-child.vue

现在您将从some-child.vue 发射到my-page.vue。我没有尝试过，但理论上你通过父级发射来做什么：(this.$parent.$emit('loader', false)) 你是从my-page.vue 发射到root。

因此，如果您在组件上有 $on 或 @loader，如下所示：<Some-child @loader="doSomething"/>，由于您从父级发射，这将永远不会运行。

Answer 3

这里的问题是子组件上的created 在父组件上的mounted 之前被调用，所以你在开始Axios 调用之后才开始监听。

created 生命周期事件方法不会对返回的 Promise 执行任何操作，因此您的方法会在您开始 Axios 调用后立即返回，并且 vue 组件生命周期的其余部分将继续。

您应该能够将您的父观察更改为 created 事件以使其工作：

created() {
  this.$on('loader', (value) => {
    console.log(value)
  })
}

如果由于某种原因您需要做一些在created 中无法访问的操作，例如访问$el，我建议将两者都移至mounted 生命周期挂钩。