Wie alle Anforderungen in ComponentWillUnmount abgebrochen werden?

Question

Gemäß der docs kann ComponentWillUnmount Anfragen abbrechen.

Ich habe eine Seite, die Anforderungen für einen Iframe lädt, sowie andere Anforderungen für die Seite. Wenn der Benutzer sich entscheidet, während der Bearbeitung der Anfrage von der Seite weg zu navigieren, wie kann ich diese Anfragen abbrechen, so dass die anderen Seiten, auf die der Benutzer später geht, nicht betroffen sind?

Ich sollte beachten, dass ich Redux und Redux-Saga verwende.

Answer 1

Technisch können Sie ein Versprechen nicht abbrechen oder abbrechen, weil der Webbrowser keine Methode dafür aufdeckt.

Sie können stattdessen nur das Versprechen ignorieren, wenn der Benutzer zu einer anderen Seite navigiert. Es gibt zwei Methoden, das zu tun:

Mit Redux, Thunk, und ein Versprechen Middleware

Sie sollten Ihre Anwendung Zustand in Ihrer Komponente Zustand lagern. Mit Redux wird der Anwendungsstatus für alle Komponenten freigegeben. Dann verwenden Sie redux-promise-middleware in Kombination mit Thunk Middleware, um asynchrone Aktionen in Redux zu behandeln.

einfach, in Ihrer Aktion können Sie etwas tun:

case 'LOAD_ORDERS_SUCCESS': 
    if state.location != 'orders' { return } 

    // store the data in the application state 

Mit RxJS und Observablen

Observable ist eine alternative Möglichkeit zu Promises.

Es gibt eine Bibliothek namens redux-observable und eine von Netflix, die erklären, wie Observable genau aus diesem Grund verwendet werden kann.Überprüfen Sie diese recipe in ihrer Dokumentation:

const fetchUserEpic = action$ => 
    action$.ofType(FETCH_USER) 
    .mergeMap(action => 
     ajax.getJSON(`/api/users/${action.payload}`) 
     .map(fetchUserFulfilled) 
     .takeUntil(action$.ofType(FETCH_USER_CANCELLED)) 
    ); 

Answer 2

Denken Sie einfach an als eine Opportunity-Funktion. Es ist Ihre Gelegenheit zu tun, wie die Dokumentation sagt, führen Sie zusätzliche Aufräumarbeiten durch, die React nicht alleine durchführen wird.

Soweit XHR-Anforderungen gehen, müssten Sie eine Promise-Bibliothek haben, die das Abbrechen des Versprechens unterstützt. Wenn die von Ihnen verwendete Bibliothek das unterstützt, dann würden Sie in dernur sicherstellen, dass Sie Zugriff auf alle Versprechungen haben und jede verwerfen.

Wenn Sie etwas anderes löschen möchten, müssen Sie nur die Funktionen verwenden, die Ihnen zur Verfügung stehen, um das abzubrechen, was Sie stornieren möchten. Wenn es eine Funktion ist, die es abbricht, dann verwenden Sie die Art von , wenn Sie es abbrechen müssen, wenn die Komponente abgehängt wird.

Als ein Beispiel dafür, wie wir es verwenden, wo ich bin: Wenn eine Komponente Anforderungen stellen wird, legen wir eine Eigenschaft für die Komponente fest, die ein Array ist und alle Anforderungen enthält. wir würden dies this.statePromises nennen. Wann immer wir eine Anfrage stellen/Versprechen, würden wir dieses Versprechen in die this.statePromises schieben. Im componentWillUnmount haben wir die folgende

componentWillUnmount() { 
    this.statePromises.forEach(p => p.cancel()); 
} 

p ein Versprechen zu sein. Dies funktioniert nur wegen der Bibliothek, Bluebird, die wir für unsere Versprechen verwenden. Aber das sollte Ihnen eine Vorstellung davon geben, wie Sie verwenden könnten, um zusätzliche Aufräumarbeiten durchzuführen.