vue3 图片/视频 加载失败重试

vue3 图片/视频 加载失败重试

需求背景

���户手机上传图片走oss ，在pc端在线客服连接socket

需要实时推送消息，接受到消息后，由于oss还回没有回调成功，所以图片/视频不能及时展示，所以做了一个失败重试的功能

效果图

技术方案

1. 服务端接收到oss的回调，再给客户端发送一条消息，告诉回调成功了，但是前端存在一定滞后性
2. 前端通过媒体组件提供的error事件，做回调监听，当前你可以一直监听，也可以做loadNumber次数限制

代码实现

                    {{ $t('common_loading_error') }}              {{ $t('common_loading') }}...              Your browser does not support the video tag.      import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'import { pathIsMp4 } from 'mt-core-lib'const props = defineProps({  msg: {    type: String,    required: true,    default: ''  },  width: {    type: String,    default: '138'  },  height: {    type: String,    default: '184'  }})const imgUrl = reactive({ src: props.msg })const conversionImg = new Image()const isLoaded = ref(false) // 加载状态标志const loadNumber = ref(5) // 加载次数const videoRefs = ref()let retryTimer: ReturnTypeconst checkImageLoaded = () => {  const loadImg = () => {    conversionImg.onload = () => {      if (!isLoaded.value) {        isLoaded.value = true        imgUrl.src = conversionImg.src        clearTimeout(retryTimer) // 清除定时器      }    }    conversionImg.onerror = () => {      console.log('图片错误')      if (!isLoaded.value && loadNumber.value > 0) {        loadNumber.value--        retryTimer = setTimeout(loadImg, 2000) // 启动定时器        console.log('图片加载失败，重新加载', retryTimer)      } else {        isLoaded.value = true        clearTimeout(retryTimer) // 清除定时器      }    }    conversionImg.src = props.msg  }  // 使用 requestIdleCallback() 方法在浏览器空闲时执行 loadImg() 函数  if (window.requestIdleCallback) {    window.requestIdleCallback(() => {      loadImg()    })  } else {    setTimeout(loadImg, 0)  }}const handleError = (event: Event) => {  console.log('视频加载失败', event)  // 使用 requestIdleCallback() 方法在浏览器空闲时执行 load() 函数  if (window.requestIdleCallback) {    window.requestIdleCallback(() => {      videoRefs.value.load()    })  } else {    setTimeout(() => {      videoRefs.value.load()    }, 1000)  }}onMounted(() => {  if (!pathIsMp4(props.msg)) {    checkImageLoaded()  }})onBeforeUnmount(() => {  clearTimeout(retryTimer) // 清除定时器})

总结

1. 媒体组件，提供了失败的回调，可以使用失败回调，不断的load来加载数据
2. 加载成功后，或者到达一定次数时，注意及时销毁