在创建的函数中访问 axios 响应数据 - Vue2答案

【问题标题】：Access axios response data in created function - Vue2在创建的函数中访问 axios 响应数据 - Vue2
【发布时间】：2019-03-07 09:17:35
【问题描述】：

从 API 中获取类别，将其响应保存在数据变量 categories 中，然后尝试使用 mounted () 中的响应数据：

data () {
  return {
    categories: {}
  }
}

created () {
  this.fetchCategories()
  this.showArticles(this.categories[0].id)
}

methods: {
  fetchCategories () {
    return axios.get(globalConfig.FAQCATS_URL)
      .then((resp) => {
        this.categories = resp.data
      })
      .catch((err) => {
        console.log(err)
      })
    }
}

但出现错误：Cannot read property 'id' of undefined。我猜 axios 的承诺是异步的，这就是为什么我不能在 created 或 mounted 中使用它的响应。我怎样才能正确访问它的响应？

我的操作目的是在页面加载时设置默认类别，因此页面不会为空，因为如果未选择类别，我不会显示任何项目。

showArticles方法：

showArticles (id) {
  return axios.get(globalConfig.FAQCATS_URL + '/' + id + '/articles')
    .then((resp) => {
      this.articles = resp.data
      // console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

【问题讨论】：

何时以及如何调用fetchCategories？当 fetchCategories 当时不太可能被调用时，为什么你要在 create 中执行 this.showArticles(this.categories[0].id)。请展示一个最小的、完整的代码片段，以便理解代码流。
抱歉，忘记添加fetchCategories() 电话。现已添加
然后等待fetchCategoriesthis.fetchCategories().then(() => this.showArticles(this.categories[0].id))返回的promise。
this.showArticles(this.categories[0].id) 看起来真的很可疑，看起来你试图以一种你不应该在 vue 中解决的方式来解决问题。
您介意分享showArticles 的作用吗？我同意可能有比这更好的方法。

标签： javascript vue.js axios

【解决方案1】：

您必须等待fetchCategories 返回的 Promise 才能使用 .then 解决：

this.fetchCategories()
    .then(() => this.showArticles(this.categories[0].id))

或者如果你可以使用await/async:

async created () {
  await this.fetchCategories()
  this.showArticles(this.categories[0].id)
}

但你可能想使用watch：

data () {
  return {
    categories: null
  }
}

watch: {
  categories( newList, oldList ) {
     if( !oldList ) {
        // only call showArticles if categories was not et before
        this.showArticles(this.categories[0].id)
     }
  }
} 

created () {
  this.fetchCategories()
}

【讨论】：

watch 对我的任务来说不是矫枉过正吗？ Async/Await 对我来说看起来很优雅，使用它有什么缺点吗？
@AlexanderKim 视情况而定，如果你做的是初始调用this.showArticles 和this.categories[0].id 如果categories 是第一次设置，那么我会使用watch，因为它是自我解释的。如果您稍后查看您的代码并进行一些重构，也许您决定在另一个地方使用例如 fetchCategories像 vuex 一样存储，然后 watch 可以保持不变，你只会删除你的 created。
@AlexanderKim 或换句话说watch 调用this.showArticles 是由您要调用this.showArticles 的实际事件驱动的。使用this.fetchCategories().then( ... )，它被您预见的事件调用，您期望它会发生。所以对于this.fetchCategories().then( ... )，你需要知道它确实会改变this.categories。

【解决方案2】：

Create 函数在mounted 和方法之前创建，所以首先可以使用mounted 而不是create 第二你可以调用Created 中的API 而不是methods 然后将响应存储在存储功能，因为您在安装之前无法访问data variable。

data () {
  return {
    categories: {}
  }
}

mounted() {
  this.fetchCategories()
}

methods: {
  fetchCategories () {
    return axios.get(globalConfig.FAQCATS_URL)
      .then((resp) => {
        this.categories = resp.data;
        this.showArticles(this.categories[0].id)
      })
      .catch((err) => {
        console.log(err)
      })
    }
    }

【讨论】：