Доступ к данным ответа Axios в созданной функции - Vue2

Question

Выбор категорий из 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)
    })
}

Answer 1

Create функция, созданная перед смонтированными и методами, поэтому в первом вы можете использовать mounted вместо create секунду, вы можете вызвать API в Created вместо methods и затем сохранить ответ вфункция store из-за того, что у вас нет доступа к 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)
      })
    }
    }

Answer 2

Вам нужно будет дождаться разрешения Обещания, возвращенного fetchCategories, используя .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()
}