Подождите, пока API полностью загрузится, прежде чем запускать следующую функцию - async / await - это будет работать?

Question

Я новичок в Javascript с небольшим знанием VueJs. У меня есть массив с именем tickets. У меня также есть данные API, возвращающие два разных объекта данных (билеты и профили пользователей).

У билетов есть идентификаторы пользователей, а в профилях пользователей - идентификаторы с именами.

Мне нужно было создать метод, который просматривает обе эти данные, просматривает их и назначает полному имени пользователя для представления.

У меня была проблема, из-за которой мой объект для билетов не заканчивал загрузку, и иногда это приводило к ошибке типа firstname is undefined. Итак, я решил попробовать написать асинхронный / ожидающий подход, чтобы дождаться полной загрузки билетов.

Хотя мой код работает, он просто «не чувствует себя хорошо», и я не уверен, насколько надежным он будет, когда приложение станет больше.

Могу ли я получить другой взгляд на подтверждение того, что мой текущий подход в порядке? Спасибо!

data() {
    return {
      isBusy: true,
      tickets: [],
      userProfiles: [],
    }
  },
  created() {
    this.getUserProfiles()
    this.getTickets()
  },
  methods: {
    getUserProfiles: function() {
      ApiService.getUserProfiles().then(response => {
        this.userProfiles = response.data
      })
    },
    getTickets() {
      ApiService.getTickets().then(response => {
        this.tickets = response.data
        this.assignNames(this.tickets)
        this.isBusy = false
      })
    },

    // lets wait until the issues are loaded before showing names;
    async assignNames() {
      let tickets = await this.tickets
      var i
      for (i = 0; i < this.tickets.length; i++) {
        if (tickets[i].assigned_to !== null) {
          const result = this.userProfiles.filter(profile => {
            return profile.uid == tickets[i].assigned_to
          })
          tickets[i].assigned_to = result[0].firstname + ' ' + result[0].lastname
        }
      }
    }
  }
}
</script>

Answer 1

Есть несколько способов сделать это. Вот тот, который я предпочитаю без async / await:

created() {
  this.load();
},
methods: {
  getUserProfiles: function() {
    return ApiService.getUserProfiles().then(response => {
      this.userProfiles = response.data
    })
  },
  getTickets() {
    return ApiService.getTickets().then(response => {
      this.tickets = response.data
    })
  },
  load() {
    Promise.all([
      this.getUserProfiles(),
      this.getTickets()
    ]).then(data => {
      this.assignNames();
      this.isBusy = false;
    });
  },
  assignNames(){
    const tickets = this.tickets;
    for (let i = 0; i < this.tickets.length; i++) {
      if (tickets[i].assigned_to !== null) {
        const result = this.userProfiles.filter(profile => {
          return profile.uid == tickets[i].assigned_to
        })
        tickets[i].assigned_to = result[0].firstname + ' ' + result[0].lastname
      }
    }
  }
}