Live Demo

Run @mrzr/api-client in your browser. Watch many 401s trigger a single token refresh, cancel in-flight requests and check where the token is kept.

These demos run the real @mrzr/api-client from npm against a small fake API on this site. Open DevTools → Network to see every request.

One refresh for many requests

Expire the token, then send 8 requests at the same time. Open DevTools → Network to watch it happen.

1.The access token is replaced with an expired one.
2.8 requests go out at once. The server answers each with 401.
3.The client pauses them and sends a single refresh request.
4.All 8 requests are retried with the new token and succeed.

GET #1 not sentGET #2 not sentGET #3 not sentGET #4 not sentGET #5 not sentGET #6 not sentGET #7 not sentGET #8 not sent

Refresh requests sent: –

Cancel what the user left behind

Start three 4-second requests, then cancel one of them or the whole page. A canceled request resolves with canceled: true instead of throwing.

GET /usersnot sent
GET /ordersnot sent
GET /reportsnot sent

api.get("/users", { cancelKey: "users", cancelGroup: "page" });
api.cancel("users");  // one request
api.cancel("page");   // everything the page started

Where is the token?

Not checked yet.

The client behind all three:

const api = createClient({
  loginUrl: "/api/demo/auth/login",
  refreshUrl: "/api/demo/auth/refresh",
  logoutUrl: "/api/demo/auth/logout",
  cancel: true,
  throwError: false,
});

baseUrl is left out, so the client uses this page's origin.