代码之家 › 专栏 › 技术社区 › John

方法在初始加载时未正确执行

callback vue.js javascript

John · 技术社区 · 6 年前

我有一种方法来建立俱乐部徽标图像的URL,如果该图像不存在,它为联盟徽标图像建立一个URL(它不是完美的方法,它需要重构,但它现在起作用):

getLogoUrl: function(club, league) {
  let imageExists = require('image-exists');

  // First check if club logo exists
  let src = "/images/logos/" + club + ".png";
  console.log("FIRST "+src);
  imageExists(src, function(exists) {
    // Then get league logo
    if (!exists) {
      src = "/images/leagues/" + league + ".png";
      console.log("SECOND "+src);
    }
  });
  console.log("THIRD "+src);
  return src;
}

当第一个页面被加载时(它用API中的AXIOS加载数据) mounted src 充满了俱乐部名称图像,这是不存在的。当我点击页面上的一个链接,然后点击一个链接返回此页面时,它正确地显示了联盟图像。

这是初始页面加载时的控制台输出(它加载不存在的特定图像):

FIRST /images/logos/maidenhead-united.png
THIRD /images/logos/maidenhead-united.png
SECOND /images/leagues/the-conference.png

当通过单击链接加载页面时(显示的图像正确):

FIRST /images/logos/maidenhead-united.png
SECOND /images/leagues/the-conference.png
THIRD /images/leagues/the-conference.png

那么,为什么默认图像不是在初始页面加载时加载的,而是在单击链接时加载的呢?可能是数据尚未完成加载,但方法已执行?这是此组件的所有代码:

<template>
  <div class="visits row">
    <div class="col-sm-3 visit" v-for="visit in visits" :key="visit.nr">
      <div class="card">
        <div class="card-header">{{ visit.nr }}</div>
        <div class="card-body">
          <router-link :to="{ name : 'VisitDetails', params: {id: visit.id}}">
            <h5 class="card-title">{{ visit.home }}</h5>
          </router-link>
          <div class="logo">
            <img :src="getLogoUrl(visit.home, visit.league)" class="card-img-center img-responsive center-block"> 
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'home',
  data () {
    return {
      feedback: null,
      visits: [],
      errors: []
    }
  },
  methods: {
    getLogoUrl: function(club, league) {
      let imageExists = require('image-exists');

      // First check if club logo exists
      let src = "/images/logos/" + club + ".png";
      console.log("FIRST "+src);
      imageExists(src, function(exists) {
        // Then get league logo
        if (!exists) {
          src = "/images/leagues/" + league + ".png";
          console.log("SECOND "+src);
        }
      });
      console.log("THIRD "+src);
      return src;
    }
  },
  mounted() {
    axios
      .get(this.$baseURL + "/footmarks")
      .then(response => {
        console.log(response.data)
        this.visits = response.data
      })
      .catch(e => {
        console.log(this.errors)
      })
  }
}
</script>

<style scoped>

</style>

1 回复 | 直到 6 年前

BlackICE 6 年前

IsIVE Engress使用AcYNC代码,并在回调后返回值,异步检查图像是否第一次通过,发生在代码中的第三之后,但第二次加载时,它已经具有值,因此第二次被立即调用,并在第三之前发生。

  let src = '/images/some-loading-image.png';
  console.log("FIRST "+src);
  imageExists(src, function(exists) {
    // Then get league logo
    if (!exists) {
      src = "/images/leagues/" + league + ".png";
      console.log("SECOND "+src);
    } else {
        src = "/images/logos/" + club + ".png";
    }
  });