如何取消请求,如何判断是否可以正常显示图片

如何取消请求

因为网络请求的请求顺序和响应顺序并不是一致的,连续请求三次,第一次请求的响应可能是第三个返回响应,所以在发送请求时需要取消上一次的请求.

let cancelToken;

function makeRequest(url) {
  if (cancelToken) {
    cancelToken.cancel('Operation cancelled due to new request.');
  }

  cancelToken = axios.CancelToken.source();

  axios.get(url, {
    cancelToken: cancelToken.token
  }).catch(function(thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request cancelled', thrown.message);
    } else {
      // 处理其他错误
    }
  });
}

怎么判断图片地址是否有效可以正常显示

有时会看到前端页面显示破损图片的情况,如何避免这种情况发生,显示默认图片

<template>
  <div>
    <img 
      :src="imageUrl" 
      alt="image" 
      v-if="isImageUrlValid(imageUrl)" 
    />
    <p v-else>图片资源地址无效</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    isImageUrlValid(url) {
      if (!url) return false;
      const image = new Image();
      image.onload = () => {
        return true;
      };
      image.onerror = () => {
        return false;
      };
      image.src = url;
    }
  }
};
</script>