Vue JS - 在触发函数之前检查数组中的所有项目是不是都已加载

Posted 2023-02-22

【中文标题】Vue JS - 在触发函数之前检查数组中的所有项目是不是都已加载

【英文标题】：Vue JS - Check if all items in an array are loaded before firing a functionVue JS - 在触发函数之前检查数组中的所有项目是否都已加载

【发布时间】：2021-06-19 23:26:57

【问题描述】：

我有一个名为垃圾数据的数组道具，并且该数组中的每个项目都作为地图中的自定义标记加载。我的问题是，大多数时候，标记是在加载“trashData”中的所有数据之前呈现的。因此，如果我在“trashData”中有 100 个项目，则只会出现非常少量的标记，因为“trashData”在创建标记之前无法加载数组中的所有项目。在创建标记之前，我该怎么做才能加载“trashData”中的所有项目？我知道可以使用 setTimeout 之类的东西，但我觉得这不是最佳选择。

TrashData 是该组件中的一个道具，它会调用另一个组件中的 getter。在触发相关函数以创建标记之前，是否可以检查 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);
    

【参考方案1】：

是否可以检查道具'trashData'是否已加载所有 在触发相关功能之前它需要从 api 获取的项目 创建标记？

您可以使用 Promise.all() ：您将所有请求推送到 Promises 数组中的 API，然后使用 Promise.all(). 等待它

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

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