Блог

У меня есть опора массива с именем trashData, и каждый элемент в этом массиве загружается в качестве пользовательского маркера на картах. Моя проблема в том, что в большинстве случаев маркеры отображаются до загрузки всех данных в «trashData». Поэтому, если у меня есть 100 элементов в «trashData», появляется только очень небольшое количество маркеров, потому что «trashData» не удалось бы загрузить все элементы в массив до создания маркеров. Что я могу сделать, чтобы все элементы в «trashData» загружались до создания маркеров? Я знаю, что можно использовать что-то вроде setTimeout, однако я не чувствую, что это очень оптимально.

TrashData является опорой в этом компоненте, и он вызывает геттеры в другом компоненте. Можно ли проверить, загрузил ли prop «trashData» все необходимые элементы из api, прежде чем запускать соответствующую функцию для создания маркеров?

Мусор.vue

 props: {
    trashData: {
      type: Array,
      required: true
    }
  },
  watch: {
    trashData: function (newValue) {
      console.log(newValue);
    }
  },
 methods: {
    createCustomOverlay: function (marker) {
      console.log("markers loaded");
      const imageUrl = this.$props.isReportedTrash ? this.getImageUrl(marker.imageUrl) : this.getImageUrl(marker.imageUrlBefore);
      let overlay = createCustomOverlay({
        imageUrl: imageUrl,
        lat: marker.location.lat,
        lng: marker.location.lon,
      });
      overlay.setMap(this.googleMap);
      return overlay;
    },

   createAndAddMarkers: function () {
      this.googleMapMarkers = this.trashData.map(marker => {
        const overlay = this.createCustomOverlay(marker);
        this.addMarkerClickListener(marker, overlay);
        return overlay;
      });
   }
}
 

TrashOverview.vue — это место, где «trashData» используется как «collectedTrash».

 computed: {
    collectedTrash: function () {
      return this.$store.getters.getCollectedTrash;
    }
  },
methods: {
    getCollectedTrash: function (page = -1, sort = TYPES_SORTING.DESC_CREATED_AT) {
      this.$store.dispatch(GET_COLLECTED_TRASH, {page: page, sort: sort});
    }
}
 

Можно ли проверить, загрузил ли prop «trashData» все необходимые элементы из api, прежде чем запускать соответствующую функцию для создания маркеров?

Вы можете использовать Promise.all() : вы отправляете все свои запросы в API в массиве обещаний, а затем ждете его с помощью Promise.all().

 const promiseN = new Promise((resolve, reject) => {
  getDataFromApi().then((result) => {
    resolve(result);
}});

Promise.all([promise1, ..., promiseN]).then((values) => {
  console.log(values);
});