Question

我正在使用HTML中的两个视频标签来加载当前视频以及下一个视频。当前视频开始播放时，下一个视频将被隐藏并预加载。当前视频结束时，它将淡出，下一个视频将淡入。这两个视频标签将以偶数方式工作，以在更改视频源的同时播放即将播放的视频。

问题当用户连续单击以更改视频时，控制台将返回Uncaught（未承诺）DOMException错误，该错误指向更改视频源的代码。

该错误可能是由于视频源中的连续更改，因为在更改源之前已经在该源中播放了视频。另一方面，每次点击都会创建一个视频播放承诺请求，由于该请求在解决之前就被中断，因此连续点击可能会中断该请求。

我试图用空字符串清除两个视频源，但仍会生成错误。

    // video source is getting changed which interrupts the promise and the error pointer
    oppositeVideoElement.pause();
    $(oppositeVideoElement).fadeOut(800, function () {
        $(oppositeVideoElement).attr('src', nextVideoSource); // line where error points
    });

// Play promise code which gets interrupted before resolve
function playPromiseForMobileVideo(videoElement, videoAboutToPlay) {
    var playPromise = videoElement.play();
    if (playPromise !== undefined) {
        console.log(playPromise);
        playPromise.then(
            function () {
                if (currentDevice == 'mobile' && mobileFirstTime) {
                    videoElement.pause();
                    mobileFirstTime = false;
                }
            }).catch(function (e) {
                if(cameFromNetwork) {
                    videoElement.load();
                    videoElement.play();
                    cameFromNetwork = false;
                    return;
                }
                videoElement.pause();
                $(videoElement).attr('src', videoAboutToPlay);
                videoElement.load();
                videoElement.play();
                console.log('catch video Element', videoElement);
            });
    }
}

预期结果：应清除错误，并应终止承诺。

实际结果：生成错误，阻止了当前视频的播放。

Answer 1

诺言是一种有望解决或被拒绝的结构。当使用诺言时，必须同时处理这两个诺言，即必须为拒绝创建句柄，就像必须为解决方案创建句柄一样。

在将方法作为promise调用时，应始终在末尾添加.catch()，catch调用会进行回调，并将错误作为参数传递。

示例：

const method = () => {
  return new Promise((resolve, reject) => {
    reject(new Error({});
  }); 

}

method.then(...).catch(e => console.err(e.message));

如果诺言失败，则必须抓住错误。

如果您使用异步/等待，请改用try/catch：

try {
  await method();
} catch (e) {
  console.error(e.message);
}

如何解决Uncaught（承诺）DOMException错误？

1 个答案: