Как я могу использовать Promise для повторной загрузки MediaElement в TypeScript? - PullRequest
Новая
       9

Как я могу использовать Promise для повторной загрузки MediaElement в TypeScript?

0 голосов
/ 16 октября 2018

Я пытаюсь реализовать некоторую логику повторных попыток для обработки случаев, когда элемент <audio /> встречает сетевую ошибку (HTMLMediaElement.error) в TypeScript React.Пока у меня есть базовая повторная попытка, которая обновляет src на аудиоэлементе, что, кажется, заставляет его повторно выбирать.

Я пытался заставить Promises работать в течение нескольких часов, ноЯ изо всех сил пытаюсь отобразить общие примеры онлайн (обычно в JavaScript) в мою конкретную реализацию в TypeScript.

Вот соответствующий код из того, что у меня есть: 

private element: HTMLAudioElement | null = null;    

public componentDidMount() {
  if (this.element !== null) {
    this.element.addEventListener("error", this.retry, false);
  }
}

private readonly retry = () => {
  if (this.element !== null && this.element.error !== null) {
    if (this.element.error.code === 2 && this.props.src !== undefined) {
      this.element.src = this.props.src;
    }
  }
};

public render() {
  const { src } = this.props;
  return (
    <audio ref={ref => (this.element = ref)} src={src} />
  );
}

Как можноЯ заменил этот код решением TypeScript на основе Promise с максимальными попытками по времени, например, 3 попытки с 5 секундами между каждым?

1 Ответ

0 голосов
/ 16 октября 2018

Возможно, вы сможете отследить количество ошибок при загрузке, чтобы выполнить ваши требования, со следующими изменениями: 

private element: HTMLAudioElement | null = null;    
private loadAttempts: number = 0;

public componentDidMount() {
  if (this.element !== null) {
    this.element.addEventListener("error", this.retry, false);
  }
}

private readonly retry = () => {

  if(this.loadAttempts >= 2) { 
     return;
  }

  if (this.element !== null && this.element.error !== null) {
    if (this.element.error.code === 2 && this.props.src !== undefined) {

      // Wait for 5 seconds before attempting another reload
      setTimeout(() => {

        this.element.src = this.props.src;
        this.element.load(); // Best pratice
        this.loadAttempts ++;

      }, 5000) // Delay for 5 seconds before attempted retry
    }
  }
};

public render() {
  const { src } = this.props;
  return (
    <audio ref={ref => (this.element = ref)} src={src} />
  );
}
...