Framework7 Router and Request Library: Automatic Request Cancellation on Concurrent Navigation?

Direct answer

No. Framework7's Router and f7.request are independent subsystems in v7.x and v8.x core. Starting a new navigation does not automatically abort in-flight XHR or fetch requests made through the Request Library. Route guards such as beforeEnter and beforeLeave do not signal f7.request, and the framework exposes no global request registry or bulk-cancellation API.

Confirmed facts versus likely explanation

Confirmed: the router resolves routes and loads templates independently of the request module. f7.request accepts a signal option, but nothing in the router wires that signal to navigation events.

Likely explanation: stale requests continue occupying browser per-host connection slots after navigation, which can delay data fetches for the newly active route. This is a gap in the framework, not a bug in a specific request call.

Steps for this case

1. Create one AbortController per page or route context.
2. Pass controller.signal to every f7.request call tied to that route.
3. Store the controller where the route guard can reach it, such as page context or a route-scoped map keyed by route URL.
4. In beforeLeave or the page-beforeout equivalent, call controller.abort() for the superseded request before starting the next navigation.
5. Handle the rejection from aborted requests so cancellation does not surface as an unhandled promise error.

let routeController = null;

function startRouteRequest(url) {
  if (routeController) routeController.abort();
  routeController = new AbortController();
  return f7.request({
    url,
    signal: routeController.signal,
  }).catch((err) => {
    if (err.name === 'AbortError') return;
    throw err;
  });
}

For repeated navigation to the same route with different query parameters, key the controller by the full route URL and abort the previous controller for that key before issuing the new request.

Wrapper differences and assumptions

Vue, React, and Svelte bindings share the same core router and request behavior, but component lifecycle hooks may fire before or after the navigation commit. That changes where you attach the controller, not whether automatic cancellation exists. No wrapper-specific cancellation semantics are documented.

Verification

• Search installed Framework7 source for AbortController and signal in the request and router modules to confirm no automatic wiring.
• Start a slow f7.request, navigate away, and check DevTools Network to see whether the request continues.
• Apply the manual pattern above and confirm the superseded request shows as cancelled.

Missing diagnostic detail: which Framework7 binding are you using—vanilla, Vue, React, or Svelte? The answer changes where to place the AbortController, though not the conclusion that cancellation must be manual.