Observable: catch()-Methode

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die catch()-Methode der Observable-Schnittstelle gibt ein neues Observable zurück, das einen Fehler des Quell-Observables durch Werte aus einem anderen Observable ersetzt.

Eine Funktion, die ausgeführt wird, wenn beim Quell-Observable ein Fehler auftritt. Sie muss einen Wert zurückgeben, der mit Observable.from() in ein Observable umgewandelt werden kann: ein Observable, ein Promise, ein iterierbares Objekt oder ein asynchron iterierbares Objekt. Die Funktion wird mit dem folgenden Argument aufgerufen:

error: Der Fehler des Quell-Observables.

Rückgabewert

Ein neues Observable. Bei einer Subscription gibt es die Werte des Quell-Observables aus, bis dort ein Fehler auftritt. Dann ruft es callback auf und gibt Werte aus dem Observable aus, in das dessen Rückgabewert umgewandelt wurde. Es wird abgeschlossen, wenn das Quell-Observable ohne Fehler abgeschlossen wird oder wenn das Ersatz-Observable abgeschlossen wird.

Beschreibung

Wie andere Operatoren, die Observables zurückgeben, arbeitet diese Methode verzögert: Der Aufruf erstellt ein neues Observable, ohne eine Subscription beim Quell-Observable einzurichten. Die Verarbeitung beginnt, wenn eine Subscription beim zurückgegebenen Observable eingerichtet wird.

Wenn callback eine Ausnahme auslöst oder sein Rückgabewert nicht in ein Observable umgewandelt werden kann, tritt beim zurückgegebenen Observable ein Fehler auf. Fehler des Ersatz-Observables werden ebenfalls weitergegeben; sie rufen callback nicht erneut auf.

catch() setzt die Subscription beim Quell-Observable nicht fort und versucht sie auch nicht automatisch erneut. Die Subscription beim Quell-Observable ist bereits beendet, wenn callback ausgeführt wird. Um einen Fehler eines inneren Observables zu behandeln und weiterhin Werte des Quell-Observables zu empfangen, platzieren Sie catch() innerhalb der Mapper-Funktion, die an flatMap() oder switchMap() übergeben wird.

Beispiele

Fehler in einem inneren Observable behandeln

Dieses Beispiel meldet die zurückgelegte Distanz beim Ziehen, bis sie 100 Pixel überschreitet. Der Fehler-Handler beendet den Stream des aktuellen Ziehvorgangs, lässt aber weitere Ziehvorgänge zu.

<div>Press here and move the mouse.</div>
<p>Waiting for a drag</p>

div {
  padding: 20px;
  border: 1px solid;
  user-select: none;
}

const target = document.querySelector("div");
const output = document.querySelector("p");

target
  .when("mousedown")
  .switchMap((start) =>
    document
      .when("mousemove")
      .takeUntil(document.when("mouseup"))
      .map((move) => {
        const distance = Math.hypot(
          move.clientX - start.clientX,
          move.clientY - start.clientY,
        );
        if (distance > 100) {
          throw new Error("Too far! Start a new drag.");
        }
        return distance;
      })
      .catch((error) => {
        output.textContent = error.message;
        return [];
      }),
  )
  .subscribe((distance) => {
    output.textContent = `Distance: ${Math.round(distance)} pixels`;
  });

Wenn catch() innerhalb von switchMap() platziert wird, bleibt der Fehler auf den inneren Stream beschränkt. Das leere Array schließt diesen Stream ab, ohne einen weiteren Wert auszugeben.