[{"data":1,"prerenderedAt":2203},["ShallowReactive",2],{"article-cancelling-api-requests-vue-3":3},{"id":4,"title":5,"body":6,"date":2188,"description":2189,"extension":2190,"image":2191,"meta":2192,"navigation":199,"path":2193,"readingTime":2194,"seo":2195,"stem":2196,"tags":2197,"__hash__":2202},"articles\u002Farticles\u002Fcancelling-api-requests-vue-3.md","Cancelling API Requests in Vue 3: One Registry, Two Paths, and the Question That Orders Them",{"type":7,"value":8,"toc":2176},"minimark",[9,46,51,54,102,105,108,124,130,151,162,329,338,501,518,528,532,535,587,596,742,751,755,768,810,821,827,924,943,951,971,983,1054,1075,1197,1210,1215,1309,1315,1330,1346,1350,1353,1377,1462,1478,1495,1593,1607,1611,1630,2051,2056,2068,2072,2172],[10,11,12,13,17,18,21,22,25,26,29,30,37,38,41,42,45],"p",{},"Vue 3 exposes four things that look like four separate ways to cancel a stale request. The ",[14,15,16],"code",{},"onCleanup"," parameter that ",[14,19,20],{},"watchEffect"," passes to its effect. The same parameter that ",[14,23,24],{},"watch"," passes to its callback. The ",[14,27,28],{},"onWatcherCleanup"," import shipped in ",[31,32,36],"a",{"href":33,"rel":34},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvue-3-5",[35],"nofollow","Vue 3.5",". And the ",[14,39,40],{},"AbortController"," that does the actual cancelling. They are not four ways — they are two registration paths over one cleanup registry, plus the single object that aborts the request. And one of those two paths silently stops working the instant an ",[14,43,44],{},"await"," runs: no exception, no production warning, just a stale request that resolves on its own schedule and overwrites fresher data. The fix isn't a newer API. It's knowing which path survives the await.",[47,48,50],"h2",{"id":49},"the-three-costs-of-a-request-nobody-cancelled","The three costs of a request nobody cancelled",[10,52,53],{},"Three different things break when a request outlives its relevance, and they are not one problem wearing three hats. Treating cancellation as a performance nicety dismisses the first one, which is the one that draws blood.",[10,55,56,57,59,60,63,64,63,67,63,70,63,73,63,76,79,80,82,83,85,86,88,89,91,92,95,96,101],{},"That first cost is correctness. A search field is bound to a ",[14,58,24],{},"; every keystroke fires a request. The user types ",[14,61,62],{},"k",", ",[14,65,66],{},"ki",[14,68,69],{},"kit",[14,71,72],{},"kitt",[14,74,75],{},"kitten",[14,77,78],{},"kittens"," — six requests, six round-trips, no guarantee they return in order. The request for ",[14,81,69],{}," hits a slow replica and lands last. The watcher's callback runs with the ",[14,84,69],{}," payload, overwrites the ",[14,87,78],{}," results already on screen, and the dashboard now shows results for a query the user finished typing two seconds ago. The URL still says ",[14,90,78],{},". Nothing threw. The official docs name this exact race: \"what if ",[14,93,94],{},"id"," changes before the request completes? When the previous request completes, it will still fire the callback with an ID value that is already stale\" (",[31,97,100],{"href":98,"rel":99},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Fwatchers",[35],"Vue watchers guide",").",[10,103,104],{},"The second cost is wasted work, and it scales with traffic. Every abandoned request still ran. The browser opened the connection, the server ran the query, the bytes crossed the wire. One stale search is free. A dashboard that re-fires on every filter change, parked on a second monitor all day, is a steady drip of work nobody will read — bandwidth on the client, CPU and connection-pool slots on the server.",[10,106,107],{},"The third cost is resource lifetime, and it's the quietest. A request in flight pins memory until it settles: the promise, its closure, and the response-body buffer once headers arrive — all reachable, none collectable, until the fetch resolves or rejects.",[10,109,110,111,115,116,119,120,123],{},"One clarification before the mechanism, because the search-as-you-type framing invites it: cancellation is not debounce. Debounce decides ",[112,113,114],"em",{},"whether"," to fire a request; cancellation decides what to do with the ones already in flight. They compose — debounce thins a storm of keystrokes to one request per pause, cancellation kills the previous request when the next one does fire — and a real search box usually wants both. Request deduplication (collapsing identical in-flight requests into one) is the third companion, and the library section below gets it for free. The other place reactive fetching lives — ",[14,117,118],{},"\u003CSuspense>"," with an async ",[14,121,122],{},"setup()"," — has its own cancellation story and stays out of scope here.",[47,125,127,128],{"id":126},"the-patterns-that-lost-to-abortcontroller","The patterns that lost to ",[14,129,40],{},[10,131,132,133,136,137,140,141,144,145,147,148,150],{},"Browser request cancellation has a short, tangled history, and the current advice rests on knowing which of the old patterns to stop reaching for. ",[14,134,135],{},"XMLHttpRequest"," carried ",[14,138,139],{},".abort()"," from the start — but almost nobody writes against XHR directly anymore. Axios shipped its own ",[14,142,143],{},"CancelToken",", then deprecated it in 0.22 in favor of ",[14,146,40],{},"; code still carrying ",[14,149,143],{}," is the clearest sign a cancellation path predates 2021 and is overdue for migration. Then there's the pattern that never went through a deprecation because it was never really an API: the staleness flag.",[10,152,153,154,157,158,161],{},"Plenty of hand-rolled search boxes still endorse the flag, and it's wrong in a way that matters. Watch the guard on the last line — it gates the ",[112,155,156],{},"render",", not the ",[112,159,160],{},"request",":",[163,164,165],"avoid",{},[166,167,172],"pre",{"className":168,"code":169,"language":170,"meta":171,"style":171},"language-js shiki shiki-themes github-light github-dark","let latest = 0\n\nwatch(searchTerm, async (term) => {\n  const requestId = ++latest\n  const res = await fetch(`\u002Fapi\u002Fsearch?q=${term}`)\n  const data = await res.json()\n  if (requestId === latest) results.value = data \u002F\u002F stale responses get dropped here\n})\n","js","",[14,173,174,194,201,229,247,278,299,323],{"__ignoreMap":171},[175,176,179,183,187,190],"span",{"class":177,"line":178},"line",1,[175,180,182],{"class":181},"szBVR","let",[175,184,186],{"class":185},"sVt8B"," latest ",[175,188,189],{"class":181},"=",[175,191,193],{"class":192},"sj4cs"," 0\n",[175,195,197],{"class":177,"line":196},2,[175,198,200],{"emptyLinePlaceholder":199},true,"\n",[175,202,204,207,210,213,216,220,223,226],{"class":177,"line":203},3,[175,205,24],{"class":206},"sScJk",[175,208,209],{"class":185},"(searchTerm, ",[175,211,212],{"class":181},"async",[175,214,215],{"class":185}," (",[175,217,219],{"class":218},"s4XuR","term",[175,221,222],{"class":185},") ",[175,224,225],{"class":181},"=>",[175,227,228],{"class":185}," {\n",[175,230,232,235,238,241,244],{"class":177,"line":231},4,[175,233,234],{"class":181},"  const",[175,236,237],{"class":192}," requestId",[175,239,240],{"class":181}," =",[175,242,243],{"class":181}," ++",[175,245,246],{"class":185},"latest\n",[175,248,250,252,255,257,260,263,266,270,272,275],{"class":177,"line":249},5,[175,251,234],{"class":181},[175,253,254],{"class":192}," res",[175,256,240],{"class":181},[175,258,259],{"class":181}," await",[175,261,262],{"class":206}," fetch",[175,264,265],{"class":185},"(",[175,267,269],{"class":268},"sZZnC","`\u002Fapi\u002Fsearch?q=${",[175,271,219],{"class":185},[175,273,274],{"class":268},"}`",[175,276,277],{"class":185},")\n",[175,279,281,283,286,288,290,293,296],{"class":177,"line":280},6,[175,282,234],{"class":181},[175,284,285],{"class":192}," data",[175,287,240],{"class":181},[175,289,259],{"class":181},[175,291,292],{"class":185}," res.",[175,294,295],{"class":206},"json",[175,297,298],{"class":185},"()\n",[175,300,302,305,308,311,314,316,319],{"class":177,"line":301},7,[175,303,304],{"class":181},"  if",[175,306,307],{"class":185}," (requestId ",[175,309,310],{"class":181},"===",[175,312,313],{"class":185}," latest) results.value ",[175,315,189],{"class":181},[175,317,318],{"class":185}," data ",[175,320,322],{"class":321},"sJ8bj","\u002F\u002F stale responses get dropped here\n",[175,324,326],{"class":177,"line":325},8,[175,327,328],{"class":185},"})\n",[10,330,331,332,334,335,161],{},"The flag fixes correctness and nothing else. The stale request still ran to completion — the connection opened, the server did the work, the buffer filled — so two of the three costs survive. This article rejects the flag for exactly that reason. ",[14,333,40],{}," addresses all three, because it cancels the request itself rather than ignoring the answer. The one line readers misjudge is the ",[14,336,337],{},"catch",[339,340,341],"prefer",{},[166,342,344],{"className":168,"code":343,"language":170,"meta":171,"style":171},"watch(searchTerm, async (term, _prev, onCleanup) => {\n  const controller = new AbortController()\n  onCleanup(() => controller.abort())\n  try {\n    const res = await fetch(`\u002Fapi\u002Fsearch?q=${term}`, { signal: controller.signal })\n    results.value = await res.json()\n  } catch (err) {\n    if (err.name !== 'AbortError') throw err \u002F\u002F aborting rejects the promise; that's expected, rethrow the rest\n  }\n})\n",[14,345,346,373,390,409,416,440,455,465,490,496],{"__ignoreMap":171},[175,347,348,350,352,354,356,358,360,363,365,367,369,371],{"class":177,"line":178},[175,349,24],{"class":206},[175,351,209],{"class":185},[175,353,212],{"class":181},[175,355,215],{"class":185},[175,357,219],{"class":218},[175,359,63],{"class":185},[175,361,362],{"class":218},"_prev",[175,364,63],{"class":185},[175,366,16],{"class":218},[175,368,222],{"class":185},[175,370,225],{"class":181},[175,372,228],{"class":185},[175,374,375,377,380,382,385,388],{"class":177,"line":196},[175,376,234],{"class":181},[175,378,379],{"class":192}," controller",[175,381,240],{"class":181},[175,383,384],{"class":181}," new",[175,386,387],{"class":206}," AbortController",[175,389,298],{"class":185},[175,391,392,395,398,400,403,406],{"class":177,"line":203},[175,393,394],{"class":206},"  onCleanup",[175,396,397],{"class":185},"(() ",[175,399,225],{"class":181},[175,401,402],{"class":185}," controller.",[175,404,405],{"class":206},"abort",[175,407,408],{"class":185},"())\n",[175,410,411,414],{"class":177,"line":231},[175,412,413],{"class":181},"  try",[175,415,228],{"class":185},[175,417,418,421,423,425,427,429,431,433,435,437],{"class":177,"line":249},[175,419,420],{"class":181},"    const",[175,422,254],{"class":192},[175,424,240],{"class":181},[175,426,259],{"class":181},[175,428,262],{"class":206},[175,430,265],{"class":185},[175,432,269],{"class":268},[175,434,219],{"class":185},[175,436,274],{"class":268},[175,438,439],{"class":185},", { signal: controller.signal })\n",[175,441,442,445,447,449,451,453],{"class":177,"line":280},[175,443,444],{"class":185},"    results.value ",[175,446,189],{"class":181},[175,448,259],{"class":181},[175,450,292],{"class":185},[175,452,295],{"class":206},[175,454,298],{"class":185},[175,456,457,460,462],{"class":177,"line":301},[175,458,459],{"class":185},"  } ",[175,461,337],{"class":181},[175,463,464],{"class":185}," (err) {\n",[175,466,467,470,473,476,479,481,484,487],{"class":177,"line":325},[175,468,469],{"class":181},"    if",[175,471,472],{"class":185}," (err.name ",[175,474,475],{"class":181},"!==",[175,477,478],{"class":268}," 'AbortError'",[175,480,222],{"class":185},[175,482,483],{"class":181},"throw",[175,485,486],{"class":185}," err ",[175,488,489],{"class":321},"\u002F\u002F aborting rejects the promise; that's expected, rethrow the rest\n",[175,491,493],{"class":177,"line":492},9,[175,494,495],{"class":185},"  }\n",[175,497,499],{"class":177,"line":498},10,[175,500,328],{"class":185},[10,502,503,504,507,508,510,511,513,514,517],{},"Aborting an in-flight fetch rejects its promise with an ",[14,505,506],{},"AbortError",", so the ",[14,509,337],{}," has to let that specific error pass and rethrow everything else — skip it and every cancellation surfaces as an unhandled rejection. The pre-3.5 Nuxt recipe wired the same ",[14,512,40],{}," into ",[14,515,516],{},"useAsyncData"," and exposed a manual cancel function — same primitive, more plumbing.",[10,519,520,521,523,524,527],{},"With the canceller settled — it's ",[14,522,40],{},", everywhere, now the de facto cleanup idiom — the only open question is where the ",[14,525,526],{},"controller.abort()"," registration lands so it actually fires. That's where the four names come in, and where 3.5 added a second path with a sharp edge.",[47,529,531],{"id":530},"four-names-two-registration-paths-one-registry","Four names, two registration paths, one registry",[10,533,534],{},"Here is the whole map before the zoom-in. The four names collapse into three roles:",[536,537,538,553,575],"ul",{},[539,540,541,545,546,548,549,552],"li",{},[542,543,544],"strong",{},"The canceller."," ",[14,547,40],{}," and its ",[14,550,551],{},"signal",". The only thing that actually stops a request. Settled above.",[539,554,555,545,558,560,561,563,564,567,568,570,571,574],{},[542,556,557],{},"The parameter path.",[14,559,20],{}," passes an ",[14,562,16],{}," function as the ",[112,565,566],{},"first"," argument of its effect; ",[14,569,24],{}," passes the identical function as the ",[112,572,573],{},"third"," argument of its callback. Same function, same registry, two entry points — one per watcher API.",[539,576,577,545,580,582,583,586],{},[542,578,579],{},"The import path.",[14,581,28],{},", imported from ",[14,584,585],{},"vue",", added in 3.5. It registers into the same registry as the parameter, but finds its watcher a different way — and that difference is the whole article.",[10,588,589,590,595],{},"The signatures, from the ",[31,591,594],{"href":592,"rel":593},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Freactivity-core",[35],"reactivity API reference",", show the shape but not the catch:",[166,597,601],{"className":598,"code":599,"language":600,"meta":171,"style":171},"language-ts shiki shiki-themes github-light github-dark","function watchEffect(\n  effect: (onCleanup: OnCleanup) => void,\n  options?: WatchEffectOptions\n): WatchHandle\n\ntype OnCleanup = (cleanupFn: () => void) => void\n\nfunction onWatcherCleanup(\n  cleanupFn: () => void,\n  failSilently?: boolean\n): void\n","ts",[14,602,603,614,640,651,661,665,695,699,708,723,733],{"__ignoreMap":171},[175,604,605,608,611],{"class":177,"line":178},[175,606,607],{"class":181},"function",[175,609,610],{"class":206}," watchEffect",[175,612,613],{"class":185},"(\n",[175,615,616,619,621,623,625,627,630,632,634,637],{"class":177,"line":196},[175,617,618],{"class":206},"  effect",[175,620,161],{"class":181},[175,622,215],{"class":185},[175,624,16],{"class":218},[175,626,161],{"class":181},[175,628,629],{"class":206}," OnCleanup",[175,631,222],{"class":185},[175,633,225],{"class":181},[175,635,636],{"class":192}," void",[175,638,639],{"class":185},",\n",[175,641,642,645,648],{"class":177,"line":203},[175,643,644],{"class":218},"  options",[175,646,647],{"class":181},"?:",[175,649,650],{"class":206}," WatchEffectOptions\n",[175,652,653,656,658],{"class":177,"line":231},[175,654,655],{"class":185},")",[175,657,161],{"class":181},[175,659,660],{"class":206}," WatchHandle\n",[175,662,663],{"class":177,"line":249},[175,664,200],{"emptyLinePlaceholder":199},[175,666,667,670,672,674,676,679,681,684,686,688,690,692],{"class":177,"line":280},[175,668,669],{"class":181},"type",[175,671,629],{"class":206},[175,673,240],{"class":181},[175,675,215],{"class":185},[175,677,678],{"class":206},"cleanupFn",[175,680,161],{"class":181},[175,682,683],{"class":185}," () ",[175,685,225],{"class":181},[175,687,636],{"class":192},[175,689,222],{"class":185},[175,691,225],{"class":181},[175,693,694],{"class":192}," void\n",[175,696,697],{"class":177,"line":301},[175,698,200],{"emptyLinePlaceholder":199},[175,700,701,703,706],{"class":177,"line":325},[175,702,607],{"class":181},[175,704,705],{"class":206}," onWatcherCleanup",[175,707,613],{"class":185},[175,709,710,713,715,717,719,721],{"class":177,"line":492},[175,711,712],{"class":206},"  cleanupFn",[175,714,161],{"class":181},[175,716,683],{"class":185},[175,718,225],{"class":181},[175,720,636],{"class":192},[175,722,639],{"class":185},[175,724,725,728,730],{"class":177,"line":498},[175,726,727],{"class":218},"  failSilently",[175,729,647],{"class":181},[175,731,732],{"class":192}," boolean\n",[175,734,736,738,740],{"class":177,"line":735},11,[175,737,655],{"class":185},[175,739,161],{"class":181},[175,741,694],{"class":192},[10,743,744,745,747,748,750],{},"Both paths register the same kind of callback: something that runs right before the watcher re-runs, and again when the watcher is stopped. The ",[14,746,16],{}," parameter and ",[14,749,28],{}," are not alternatives with different powers — they are two doors into one room. The rest of this piece is about why one of the doors is sometimes locked.",[47,752,754],{"id":753},"the-cleanup-registry-under-the-hood","The cleanup registry, under the hood",[10,756,757,758,761,762,767],{},"Inside ",[14,759,760],{},"packages\u002Freactivity\u002Fsrc\u002Fwatch.ts",", the cleanup callbacks for every watcher live in one structure (",[31,763,766],{"href":764,"rel":765},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Fblob\u002Fmain\u002Fpackages\u002Freactivity\u002Fsrc\u002Fwatch.ts",[35],"Vue core source","). The key is the part to notice:",[166,769,771],{"className":598,"code":770,"language":600,"meta":171,"style":171},"const cleanupMap: WeakMap\u003CReactiveEffect, (() => void)[]> = new WeakMap()\n",[14,772,773],{"__ignoreMap":171},[175,774,775,778,781,783,786,789,792,795,797,799,802,804,806,808],{"class":177,"line":178},[175,776,777],{"class":181},"const",[175,779,780],{"class":192}," cleanupMap",[175,782,161],{"class":181},[175,784,785],{"class":206}," WeakMap",[175,787,788],{"class":185},"\u003C",[175,790,791],{"class":206},"ReactiveEffect",[175,793,794],{"class":185},", (() ",[175,796,225],{"class":181},[175,798,636],{"class":192},[175,800,801],{"class":185},")[]> ",[175,803,189],{"class":181},[175,805,384],{"class":181},[175,807,785],{"class":206},[175,809,298],{"class":185},[10,811,812,813,816,817,820],{},"A ",[14,814,815],{},"WeakMap"," keyed by the effect, holding an array of cleanup functions per watcher. Because the key is the effect itself, the whole entry is garbage-collected when the watcher is — the registry can't leak the cleanups it holds. Register a cleanup and it's pushed onto that watcher's array. When the watcher re-runs, the array drains first; the source comment is blunt about it — \"cleanup before running cb again.\" When the watcher is disposed, the same array runs through the effect's ",[14,818,819],{},"onStop",". That's the entire lifecycle: run before next, run on stop.",[10,822,823,824,826],{},"Here's the toy version — one ",[14,825,20],{},", the cleanup wired through the first-argument parameter, no error handling or result use because the only thing on display is the wiring:",[166,828,830],{"className":168,"code":829,"language":170,"meta":171,"style":171},"import { watchEffect } from 'vue'\n\nwatchEffect((onCleanup) => {\n  const controller = new AbortController()\n  onCleanup(() => controller.abort()) \u002F\u002F load-bearing: register the abort the instant the controller exists\n  fetch(`\u002Fapi\u002Fuser\u002F${userId.value}`, { signal: controller.signal })\n})\n",[14,831,832,846,850,865,879,897,920],{"__ignoreMap":171},[175,833,834,837,840,843],{"class":177,"line":178},[175,835,836],{"class":181},"import",[175,838,839],{"class":185}," { watchEffect } ",[175,841,842],{"class":181},"from",[175,844,845],{"class":268}," 'vue'\n",[175,847,848],{"class":177,"line":196},[175,849,200],{"emptyLinePlaceholder":199},[175,851,852,854,857,859,861,863],{"class":177,"line":203},[175,853,20],{"class":206},[175,855,856],{"class":185},"((",[175,858,16],{"class":218},[175,860,222],{"class":185},[175,862,225],{"class":181},[175,864,228],{"class":185},[175,866,867,869,871,873,875,877],{"class":177,"line":231},[175,868,234],{"class":181},[175,870,379],{"class":192},[175,872,240],{"class":181},[175,874,384],{"class":181},[175,876,387],{"class":206},[175,878,298],{"class":185},[175,880,881,883,885,887,889,891,894],{"class":177,"line":249},[175,882,394],{"class":206},[175,884,397],{"class":185},[175,886,225],{"class":181},[175,888,402],{"class":185},[175,890,405],{"class":206},[175,892,893],{"class":185},"()) ",[175,895,896],{"class":321},"\u002F\u002F load-bearing: register the abort the instant the controller exists\n",[175,898,899,902,904,907,910,913,916,918],{"class":177,"line":280},[175,900,901],{"class":206},"  fetch",[175,903,265],{"class":185},[175,905,906],{"class":268},"`\u002Fapi\u002Fuser\u002F${",[175,908,909],{"class":185},"userId",[175,911,912],{"class":268},".",[175,914,915],{"class":185},"value",[175,917,274],{"class":268},[175,919,439],{"class":185},[175,921,922],{"class":177,"line":301},[175,923,328],{"class":185},[10,925,926,927,929,930,932,933,935,936,938,939,942],{},"Every time ",[14,928,909],{}," changes, ",[14,931,20],{}," re-runs: it drains the previous cleanup — which aborts the prior request — then runs the effect again with a fresh controller. The ",[14,934,16],{}," parameter here is a closure. When ",[14,937,20],{}," invokes the effect, it hands in a function that already knows which watcher it belongs to, because it was created bound to that watcher. Hold onto that word — ",[112,940,941],{},"bound",". It's the difference between the two paths.",[47,944,946,948,949],{"id":945},"onwatchercleanup-stops-working-after-the-first-await",[14,947,28],{}," stops working after the first ",[14,950,44],{},[10,952,953,955,956,958,959,961,962,964,965,967,968,101],{},[14,954,28],{}," registers into that same array. It finds its watcher through a different mechanism, and that mechanism has an expiry. The docs admit the limit in a parenthetical: ",[14,957,28],{}," \"can only be called during the synchronous execution of a ",[14,960,20],{}," effect function or ",[14,963,24],{}," callback function (i.e. it cannot be called after an ",[14,966,44],{}," statement in an async function)\" (",[31,969,594],{"href":592,"rel":970},[35],[10,972,973,974,63,977,979,980,161],{},"The reason is one module-level variable. In ",[14,975,976],{},"watch.ts",[14,978,28],{}," defaults its owner to ",[14,981,982],{},"activeWatcher",[166,984,986],{"className":598,"code":985,"language":600,"meta":171,"style":171},"export function onWatcherCleanup(\n  cleanupFn: () => void,\n  failSilently = false,\n  owner: ReactiveEffect | undefined = activeWatcher,\n): void\n",[14,987,988,1000,1014,1025,1046],{"__ignoreMap":171},[175,989,990,993,996,998],{"class":177,"line":178},[175,991,992],{"class":181},"export",[175,994,995],{"class":181}," function",[175,997,705],{"class":206},[175,999,613],{"class":185},[175,1001,1002,1004,1006,1008,1010,1012],{"class":177,"line":196},[175,1003,712],{"class":206},[175,1005,161],{"class":181},[175,1007,683],{"class":185},[175,1009,225],{"class":181},[175,1011,636],{"class":192},[175,1013,639],{"class":185},[175,1015,1016,1018,1020,1023],{"class":177,"line":203},[175,1017,727],{"class":218},[175,1019,240],{"class":181},[175,1021,1022],{"class":192}," false",[175,1024,639],{"class":185},[175,1026,1027,1030,1032,1035,1038,1041,1043],{"class":177,"line":231},[175,1028,1029],{"class":218},"  owner",[175,1031,161],{"class":181},[175,1033,1034],{"class":206}," ReactiveEffect",[175,1036,1037],{"class":181}," |",[175,1039,1040],{"class":192}," undefined",[175,1042,240],{"class":181},[175,1044,1045],{"class":185}," activeWatcher,\n",[175,1047,1048,1050,1052],{"class":177,"line":249},[175,1049,655],{"class":185},[175,1051,161],{"class":181},[175,1053,694],{"class":192},[10,1055,1056,1058,1059,1062,1063,1065,1066,1068,1069,1072,1073,161],{},[14,1057,982],{}," is a single mutable binding — ",[14,1060,1061],{},"let activeWatcher: ReactiveEffect | undefined = undefined"," — that Vue sets when a watcher enters its synchronous phase and clears the moment that phase ends. A call before the first ",[14,1064,44],{}," sees the live watcher. A call after the ",[14,1067,44],{}," sees ",[14,1070,1071],{},"undefined",", because the synchronous phase finished several microtasks ago. Watch where the registration sits relative to the ",[14,1074,44],{},[166,1076,1078],{"className":168,"code":1077,"language":170,"meta":171,"style":171},"import { watch, onWatcherCleanup } from 'vue'\n\nwatch(userId, async (id) => {\n  const controller = new AbortController()\n  const res = await fetch(`\u002Fapi\u002Fuser\u002F${id}`, { signal: controller.signal })\n  const profile = await res.json()\n  onWatcherCleanup(() => controller.abort()) \u002F\u002F activeWatcher is already undefined — registers nothing\n  applyProfile(profile)\n})\n",[14,1079,1080,1091,1095,1114,1128,1150,1167,1185,1193],{"__ignoreMap":171},[175,1081,1082,1084,1087,1089],{"class":177,"line":178},[175,1083,836],{"class":181},[175,1085,1086],{"class":185}," { watch, onWatcherCleanup } ",[175,1088,842],{"class":181},[175,1090,845],{"class":268},[175,1092,1093],{"class":177,"line":196},[175,1094,200],{"emptyLinePlaceholder":199},[175,1096,1097,1099,1102,1104,1106,1108,1110,1112],{"class":177,"line":203},[175,1098,24],{"class":206},[175,1100,1101],{"class":185},"(userId, ",[175,1103,212],{"class":181},[175,1105,215],{"class":185},[175,1107,94],{"class":218},[175,1109,222],{"class":185},[175,1111,225],{"class":181},[175,1113,228],{"class":185},[175,1115,1116,1118,1120,1122,1124,1126],{"class":177,"line":231},[175,1117,234],{"class":181},[175,1119,379],{"class":192},[175,1121,240],{"class":181},[175,1123,384],{"class":181},[175,1125,387],{"class":206},[175,1127,298],{"class":185},[175,1129,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148],{"class":177,"line":249},[175,1131,234],{"class":181},[175,1133,254],{"class":192},[175,1135,240],{"class":181},[175,1137,259],{"class":181},[175,1139,262],{"class":206},[175,1141,265],{"class":185},[175,1143,906],{"class":268},[175,1145,94],{"class":185},[175,1147,274],{"class":268},[175,1149,439],{"class":185},[175,1151,1152,1154,1157,1159,1161,1163,1165],{"class":177,"line":280},[175,1153,234],{"class":181},[175,1155,1156],{"class":192}," profile",[175,1158,240],{"class":181},[175,1160,259],{"class":181},[175,1162,292],{"class":185},[175,1164,295],{"class":206},[175,1166,298],{"class":185},[175,1168,1169,1172,1174,1176,1178,1180,1182],{"class":177,"line":301},[175,1170,1171],{"class":206},"  onWatcherCleanup",[175,1173,397],{"class":185},[175,1175,225],{"class":181},[175,1177,402],{"class":185},[175,1179,405],{"class":206},[175,1181,893],{"class":185},[175,1183,1184],{"class":321},"\u002F\u002F activeWatcher is already undefined — registers nothing\n",[175,1186,1187,1190],{"class":177,"line":325},[175,1188,1189],{"class":206},"  applyProfile",[175,1191,1192],{"class":185},"(profile)\n",[175,1194,1195],{"class":177,"line":492},[175,1196,328],{"class":185},[10,1198,1199,1200,1203,1204,1209],{},"That call registers nothing. With ",[14,1201,1202],{},"failSilently"," at its default, Vue emits a warning — \"onWatcherCleanup() was called when there was no active watcher to associate with\" — and in production that warning is stripped, so the call is a pure no-op. The controller never enters the registry, the previous request is never aborted, and every cost from the first section is back on the table. This isn't hypothetical: the issue asking for a sharper warning here (",[31,1205,1208],{"href":1206,"rel":1207},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fdocs\u002Fissues\u002F3222",[35],"vuejs\u002Fdocs #3222",") was opened in April 2025 and is still open, which means the runtime still won't throw and the docs note remains the only guardrail.",[10,1211,1212,1213,161],{},"The blunt repair is to register during the synchronous phase, before the first ",[14,1214,44],{},[166,1216,1218],{"className":168,"code":1217,"language":170,"meta":171,"style":171},"watch(userId, async (id) => {\n  const controller = new AbortController()\n  onWatcherCleanup(() => controller.abort()) \u002F\u002F still inside the sync phase — registers fine\n  const res = await fetch(`\u002Fapi\u002Fuser\u002F${id}`, { signal: controller.signal })\n  applyProfile(await res.json())\n})\n",[14,1219,1220,1238,1252,1269,1291,1305],{"__ignoreMap":171},[175,1221,1222,1224,1226,1228,1230,1232,1234,1236],{"class":177,"line":178},[175,1223,24],{"class":206},[175,1225,1101],{"class":185},[175,1227,212],{"class":181},[175,1229,215],{"class":185},[175,1231,94],{"class":218},[175,1233,222],{"class":185},[175,1235,225],{"class":181},[175,1237,228],{"class":185},[175,1239,1240,1242,1244,1246,1248,1250],{"class":177,"line":196},[175,1241,234],{"class":181},[175,1243,379],{"class":192},[175,1245,240],{"class":181},[175,1247,384],{"class":181},[175,1249,387],{"class":206},[175,1251,298],{"class":185},[175,1253,1254,1256,1258,1260,1262,1264,1266],{"class":177,"line":203},[175,1255,1171],{"class":206},[175,1257,397],{"class":185},[175,1259,225],{"class":181},[175,1261,402],{"class":185},[175,1263,405],{"class":206},[175,1265,893],{"class":185},[175,1267,1268],{"class":321},"\u002F\u002F still inside the sync phase — registers fine\n",[175,1270,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289],{"class":177,"line":231},[175,1272,234],{"class":181},[175,1274,254],{"class":192},[175,1276,240],{"class":181},[175,1278,259],{"class":181},[175,1280,262],{"class":206},[175,1282,265],{"class":185},[175,1284,906],{"class":268},[175,1286,94],{"class":185},[175,1288,274],{"class":268},[175,1290,439],{"class":185},[175,1292,1293,1295,1297,1299,1301,1303],{"class":177,"line":249},[175,1294,1189],{"class":206},[175,1296,265],{"class":185},[175,1298,44],{"class":181},[175,1300,292],{"class":185},[175,1302,295],{"class":206},[175,1304,408],{"class":185},[175,1306,1307],{"class":177,"line":280},[175,1308,328],{"class":185},[10,1310,1311,1312,1314],{},"Move one line up and ",[14,1313,28],{}," behaves exactly as advertised.",[10,1316,1317,1318,1320,1321,1323,1324,1326,1327,1329],{},"None of this means 3.5 was wrong to ship the global. The ",[14,1319,16],{}," parameter carries a real ergonomic cost: it has to be threaded through the watcher's signature, and a cleanup that needs to be registered from inside a synchronous helper three calls deep can't reach the parameter unless every layer passes it down by hand. ",[14,1322,28],{}," solves precisely that — it pulls the active watcher from module state, so any synchronous code running under the watcher can register cleanup with no parameter in scope. That's a real ergonomic gain: the cleanup reads beside the effect, with nothing bolted onto the callback's signature to carry it there. The team didn't ship a worse parameter; it shipped a different tool with a different constraint, and the constraint is invisible until an ",[14,1325,44],{}," crosses it. The verdict: ",[14,1328,28],{}," is the cleaner call in synchronous code and a trap in asynchronous code — which is exactly the code doing the fetching it's most often demonstrated with.",[10,1331,1332,1333,1335,1336,1339,1340,1342,1343,1345],{},"The parameter removes the ordering question altogether. Because it's the bound closure from the previous section, the docs are explicit that it \"is bound to the watcher instance so it is not subject to the synchronous constraint of ",[14,1334,28],{},"\" (",[31,1337,100],{"href":98,"rel":1338},[35],") — it registers correctly whether it runs before or after an ",[14,1341,44],{},", because there's no ",[14,1344,982],{}," for it to miss.",[47,1347,1349],{"id":1348},"where-a-library-earns-the-dependency","Where a library earns the dependency",[10,1351,1352],{},"The strongest case against everything above is short: don't hand-roll cancellation at all. A data-fetching library already owns the registry, the signal, and the dedup, and a search box is the exact use case those libraries were built for. The counter insists the primitive is a waste of attention — and for the search box, it's mostly right.",[10,1354,1355,1356,1359,1360,1362,1363,1366,1367,1370,1371,1376],{},"VueUse's ",[14,1357,1358],{},"useFetch"," wraps an ",[14,1361,40],{}," and re-runs on reactive source changes. The one option that matters for cancellation is ",[14,1364,1365],{},"refetch",": set it ",[14,1368,1369],{},"true"," and the previous request aborts automatically whenever the URL ref changes (",[31,1372,1375],{"href":1373,"rel":1374},"https:\u002F\u002Fvueuse.org\u002Fcore\u002FuseFetch\u002F",[35],"VueUse useFetch","). The signal threading from the earlier examples disappears — the library does it:",[166,1378,1380],{"className":168,"code":1379,"language":170,"meta":171,"style":171},"import { useFetch } from '@vueuse\u002Fcore'\n\nconst url = computed(() => `\u002Fapi\u002Fsearch?q=${searchTerm.value}`)\nconst { data } = useFetch(url, { refetch: true }).json() \u002F\u002F aborts the in-flight request when `url` changes\n",[14,1381,1382,1394,1398,1428],{"__ignoreMap":171},[175,1383,1384,1386,1389,1391],{"class":177,"line":178},[175,1385,836],{"class":181},[175,1387,1388],{"class":185}," { useFetch } ",[175,1390,842],{"class":181},[175,1392,1393],{"class":268}," '@vueuse\u002Fcore'\n",[175,1395,1396],{"class":177,"line":196},[175,1397,200],{"emptyLinePlaceholder":199},[175,1399,1400,1402,1405,1407,1410,1412,1414,1417,1420,1422,1424,1426],{"class":177,"line":203},[175,1401,777],{"class":181},[175,1403,1404],{"class":192}," url",[175,1406,240],{"class":181},[175,1408,1409],{"class":206}," computed",[175,1411,397],{"class":185},[175,1413,225],{"class":181},[175,1415,1416],{"class":268}," `\u002Fapi\u002Fsearch?q=${",[175,1418,1419],{"class":185},"searchTerm",[175,1421,912],{"class":268},[175,1423,915],{"class":185},[175,1425,274],{"class":268},[175,1427,277],{"class":185},[175,1429,1430,1432,1435,1438,1441,1443,1446,1449,1451,1454,1456,1459],{"class":177,"line":231},[175,1431,777],{"class":181},[175,1433,1434],{"class":185}," { ",[175,1436,1437],{"class":192},"data",[175,1439,1440],{"class":185}," } ",[175,1442,189],{"class":181},[175,1444,1445],{"class":206}," useFetch",[175,1447,1448],{"class":185},"(url, { refetch: ",[175,1450,1369],{"class":192},[175,1452,1453],{"class":185}," }).",[175,1455,295],{"class":206},[175,1457,1458],{"class":185},"() ",[175,1460,1461],{"class":321},"\u002F\u002F aborts the in-flight request when `url` changes\n",[10,1463,1464,1465,1467,1468,63,1470,1473,1474,1477],{},"That's genuinely less code than the hand-rolled watcher, and it folds in request deduplication for free. ",[14,1466,1358],{}," also exposes ",[14,1469,405],{},[14,1471,1472],{},"canAbort",", and ",[14,1475,1476],{},"aborted"," for wiring a manual Stop button — a different interaction than search-as-you-type, so it stays a mention rather than a contrived demo here.",[10,1479,1480,1481,1484,1485,1488,1489,1494],{},"TanStack Query (via ",[14,1482,1483],{},"@tanstack\u002Fvue-query",") argues the same position from the other end: it hands an ",[14,1486,1487],{},"AbortSignal"," to every query function and treats that signal as the universal cancellation contract. The catch is the default. TanStack does not cancel on change or unmount unless the query function actually forwards the signal it's handed (",[31,1490,1493],{"href":1491,"rel":1492},"https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest\u002Fdocs\u002Fframework\u002Fvue\u002Fguides\u002Fquery-cancellation",[35],"TanStack Query cancellation","):",[166,1496,1498],{"className":168,"code":1497,"language":170,"meta":171,"style":171},"import { useQuery } from '@tanstack\u002Fvue-query'\n\nuseQuery({\n  queryKey: ['search', searchTerm],\n  queryFn: ({ signal }) => fetch(`\u002Fapi\u002Fsearch?q=${searchTerm.value}`, { signal }).then(r => r.json()), \u002F\u002F forward `signal` or nothing cancels\n})\n",[14,1499,1500,1512,1516,1524,1535,1589],{"__ignoreMap":171},[175,1501,1502,1504,1507,1509],{"class":177,"line":178},[175,1503,836],{"class":181},[175,1505,1506],{"class":185}," { useQuery } ",[175,1508,842],{"class":181},[175,1510,1511],{"class":268}," '@tanstack\u002Fvue-query'\n",[175,1513,1514],{"class":177,"line":196},[175,1515,200],{"emptyLinePlaceholder":199},[175,1517,1518,1521],{"class":177,"line":203},[175,1519,1520],{"class":206},"useQuery",[175,1522,1523],{"class":185},"({\n",[175,1525,1526,1529,1532],{"class":177,"line":231},[175,1527,1528],{"class":185},"  queryKey: [",[175,1530,1531],{"class":268},"'search'",[175,1533,1534],{"class":185},", searchTerm],\n",[175,1536,1537,1540,1543,1545,1548,1550,1552,1554,1556,1558,1560,1562,1564,1567,1570,1572,1575,1578,1581,1583,1586],{"class":177,"line":249},[175,1538,1539],{"class":206},"  queryFn",[175,1541,1542],{"class":185},": ({ ",[175,1544,551],{"class":218},[175,1546,1547],{"class":185}," }) ",[175,1549,225],{"class":181},[175,1551,262],{"class":206},[175,1553,265],{"class":185},[175,1555,269],{"class":268},[175,1557,1419],{"class":185},[175,1559,912],{"class":268},[175,1561,915],{"class":185},[175,1563,274],{"class":268},[175,1565,1566],{"class":185},", { signal }).",[175,1568,1569],{"class":206},"then",[175,1571,265],{"class":185},[175,1573,1574],{"class":218},"r",[175,1576,1577],{"class":181}," =>",[175,1579,1580],{"class":185}," r.",[175,1582,295],{"class":206},[175,1584,1585],{"class":185},"()), ",[175,1587,1588],{"class":321},"\u002F\u002F forward `signal` or nothing cancels\n",[175,1590,1591],{"class":177,"line":280},[175,1592,328],{"class":185},[10,1594,1595,1596,1598,1599,1602,1603,1606],{},"So \"the library makes it automatic\" is half true: automatic that the signal exists, manual that it's used. That's the seam in the counter. The primitive's defenders concede the search box to the library — when the app already depends on one, or when the use case wants the cache, dedup, and retry machinery that rides along, reaching for ",[14,1597,1358],{}," or TanStack is the right call. The line holds where the alternative is adding a data-fetching dependency to abort a single fetch, or where the code needs control the wrapper doesn't expose: the watcher's ",[14,1600,1601],{},"flush"," timing, a non-",[14,1604,1605],{},"fetch"," cancellable, cleanup sequenced against other effects. The primitive is small. Owning it is not the sin the counter implies — provided the registration lands where it fires.",[47,1608,1610],{"id":1609},"the-decision-rule","The decision rule",[10,1612,1613,1614,1616,1617,1619,1620,1622,1623,1625,1626,1629],{},"Every choice above reduces to one question: is the ",[14,1615,526],{}," registration still running inside the watcher's synchronous phase? If yes, any path works — pick on ergonomics. Once the registration has crossed an ",[14,1618,44],{},", only the bound parameter survives. Everything else the docs dwell on — ",[14,1621,1601],{}," timing, the ",[14,1624,1202],{}," flag, ",[14,1627,1628],{},"getCurrentWatcher"," — the rule dismisses as secondary.",[1631,1632,1633,1648],"best-practice",{},[10,1634,1635,545,1638,1640,1641,1644,1645,1647],{},[542,1636,1637],{},"In general:",[14,1639,40],{}," is the canceller; the only real decision is where the ",[14,1642,1643],{},"abort()"," registration runs — and it has to run before the first ",[14,1646,44],{},", or use the path that doesn't care.",[536,1649,1650,1776,1937],{},[539,1651,1652,1658,1659,1661,1662,1724],{},[542,1653,1654,1655,1657],{},"Synchronous registration (no ",[14,1656,44],{}," before it)"," — reach for ",[14,1660,28],{},"; it's the cleanest call and threads no parameter.\n",[163,1663,1664],{},[166,1665,1667],{"className":168,"code":1666,"language":170,"meta":171,"style":171},"\u002F\u002F pre-3.5 plumbing: a separate ref plus a second watcher just to abort\nconst controller = ref()\nwatch(id, () => {\n  controller.value?.abort()\n  controller.value = new AbortController()\n})\n",[14,1668,1669,1674,1687,1698,1707,1720],{"__ignoreMap":171},[175,1670,1671],{"class":177,"line":178},[175,1672,1673],{"class":321},"\u002F\u002F pre-3.5 plumbing: a separate ref plus a second watcher just to abort\n",[175,1675,1676,1678,1680,1682,1685],{"class":177,"line":196},[175,1677,777],{"class":181},[175,1679,379],{"class":192},[175,1681,240],{"class":181},[175,1683,1684],{"class":206}," ref",[175,1686,298],{"class":185},[175,1688,1689,1691,1694,1696],{"class":177,"line":203},[175,1690,24],{"class":206},[175,1692,1693],{"class":185},"(id, () ",[175,1695,225],{"class":181},[175,1697,228],{"class":185},[175,1699,1700,1703,1705],{"class":177,"line":231},[175,1701,1702],{"class":185},"  controller.value?.",[175,1704,405],{"class":206},[175,1706,298],{"class":185},[175,1708,1709,1712,1714,1716,1718],{"class":177,"line":249},[175,1710,1711],{"class":185},"  controller.value ",[175,1713,189],{"class":181},[175,1715,384],{"class":181},[175,1717,387],{"class":206},[175,1719,298],{"class":185},[175,1721,1722],{"class":177,"line":280},[175,1723,328],{"class":185},[339,1725,1726],{},[166,1727,1729],{"className":168,"code":1728,"language":170,"meta":171,"style":171},"watch(id, () => {\n  const controller = new AbortController()\n  onWatcherCleanup(() => controller.abort()) \u002F\u002F co-located, sync phase\n})\n",[14,1730,1731,1741,1755,1772],{"__ignoreMap":171},[175,1732,1733,1735,1737,1739],{"class":177,"line":178},[175,1734,24],{"class":206},[175,1736,1693],{"class":185},[175,1738,225],{"class":181},[175,1740,228],{"class":185},[175,1742,1743,1745,1747,1749,1751,1753],{"class":177,"line":196},[175,1744,234],{"class":181},[175,1746,379],{"class":192},[175,1748,240],{"class":181},[175,1750,384],{"class":181},[175,1752,387],{"class":206},[175,1754,298],{"class":185},[175,1756,1757,1759,1761,1763,1765,1767,1769],{"class":177,"line":203},[175,1758,1171],{"class":206},[175,1760,397],{"class":185},[175,1762,225],{"class":181},[175,1764,402],{"class":185},[175,1766,405],{"class":206},[175,1768,893],{"class":185},[175,1770,1771],{"class":321},"\u002F\u002F co-located, sync phase\n",[175,1773,1774],{"class":177,"line":231},[175,1775,328],{"class":185},[539,1777,1778,1783,1784,1786,1787,1789,1790,1859],{},[542,1779,1780,1781],{},"Registration after an ",[14,1782,44],{}," — reach for the ",[14,1785,16],{}," parameter; it's bound to the watcher instance, so it survives the async gap that strands ",[14,1788,28],{},".\n",[163,1791,1792],{},[166,1793,1795],{"className":168,"code":1794,"language":170,"meta":171,"style":171},"watch(id, async () => {\n  const c = new AbortController()\n  await fetch(url, { signal: c.signal })\n  onWatcherCleanup(() => c.abort()) \u002F\u002F activeWatcher gone — no-op\n})\n",[14,1796,1797,1812,1827,1837,1855],{"__ignoreMap":171},[175,1798,1799,1801,1804,1806,1808,1810],{"class":177,"line":178},[175,1800,24],{"class":206},[175,1802,1803],{"class":185},"(id, ",[175,1805,212],{"class":181},[175,1807,683],{"class":185},[175,1809,225],{"class":181},[175,1811,228],{"class":185},[175,1813,1814,1816,1819,1821,1823,1825],{"class":177,"line":196},[175,1815,234],{"class":181},[175,1817,1818],{"class":192}," c",[175,1820,240],{"class":181},[175,1822,384],{"class":181},[175,1824,387],{"class":206},[175,1826,298],{"class":185},[175,1828,1829,1832,1834],{"class":177,"line":203},[175,1830,1831],{"class":181},"  await",[175,1833,262],{"class":206},[175,1835,1836],{"class":185},"(url, { signal: c.signal })\n",[175,1838,1839,1841,1843,1845,1848,1850,1852],{"class":177,"line":231},[175,1840,1171],{"class":206},[175,1842,397],{"class":185},[175,1844,225],{"class":181},[175,1846,1847],{"class":185}," c.",[175,1849,405],{"class":206},[175,1851,893],{"class":185},[175,1853,1854],{"class":321},"\u002F\u002F activeWatcher gone — no-op\n",[175,1856,1857],{"class":177,"line":249},[175,1858,328],{"class":185},[339,1860,1861],{},[166,1862,1864],{"className":168,"code":1863,"language":170,"meta":171,"style":171},"watch(id, async (v, _p, onCleanup) => {\n  const c = new AbortController()\n  onCleanup(() => c.abort()) \u002F\u002F bound to the watcher; fires on the next change\n  await fetch(url, { signal: c.signal })\n})\n",[14,1865,1866,1894,1908,1925,1933],{"__ignoreMap":171},[175,1867,1868,1870,1872,1874,1876,1879,1881,1884,1886,1888,1890,1892],{"class":177,"line":178},[175,1869,24],{"class":206},[175,1871,1803],{"class":185},[175,1873,212],{"class":181},[175,1875,215],{"class":185},[175,1877,1878],{"class":218},"v",[175,1880,63],{"class":185},[175,1882,1883],{"class":218},"_p",[175,1885,63],{"class":185},[175,1887,16],{"class":218},[175,1889,222],{"class":185},[175,1891,225],{"class":181},[175,1893,228],{"class":185},[175,1895,1896,1898,1900,1902,1904,1906],{"class":177,"line":196},[175,1897,234],{"class":181},[175,1899,1818],{"class":192},[175,1901,240],{"class":181},[175,1903,384],{"class":181},[175,1905,387],{"class":206},[175,1907,298],{"class":185},[175,1909,1910,1912,1914,1916,1918,1920,1922],{"class":177,"line":203},[175,1911,394],{"class":206},[175,1913,397],{"class":185},[175,1915,225],{"class":181},[175,1917,1847],{"class":185},[175,1919,405],{"class":206},[175,1921,893],{"class":185},[175,1923,1924],{"class":321},"\u002F\u002F bound to the watcher; fires on the next change\n",[175,1926,1927,1929,1931],{"class":177,"line":231},[175,1928,1831],{"class":181},[175,1930,262],{"class":206},[175,1932,1836],{"class":185},[175,1934,1935],{"class":177,"line":249},[175,1936,328],{"class":185},[539,1938,1939,1942,1943,1946,1947,1949,1950,1952,1953,2017],{},[542,1940,1941],{},"No appetite to own the registry"," — reach for a library; ",[14,1944,1945],{},"useFetch({ refetch: true })",", or a TanStack query that forwards ",[14,1948,551],{},", is the same ",[14,1951,40],{}," with the bookkeeping hidden.\n",[163,1954,1955],{},[166,1956,1958],{"className":168,"code":1957,"language":170,"meta":171,"style":171},"\u002F\u002F hand-rolling abort + dedup + retry for a plain search box\nlet latest = 0\nwatch(term, async (t) => {\n  const id = ++latest\n  \u002F\u002F ...controller, guard, retry by hand...\n})\n",[14,1959,1960,1965,1975,1995,2008,2013],{"__ignoreMap":171},[175,1961,1962],{"class":177,"line":178},[175,1963,1964],{"class":321},"\u002F\u002F hand-rolling abort + dedup + retry for a plain search box\n",[175,1966,1967,1969,1971,1973],{"class":177,"line":196},[175,1968,182],{"class":181},[175,1970,186],{"class":185},[175,1972,189],{"class":181},[175,1974,193],{"class":192},[175,1976,1977,1979,1982,1984,1986,1989,1991,1993],{"class":177,"line":203},[175,1978,24],{"class":206},[175,1980,1981],{"class":185},"(term, ",[175,1983,212],{"class":181},[175,1985,215],{"class":185},[175,1987,1988],{"class":218},"t",[175,1990,222],{"class":185},[175,1992,225],{"class":181},[175,1994,228],{"class":185},[175,1996,1997,1999,2002,2004,2006],{"class":177,"line":231},[175,1998,234],{"class":181},[175,2000,2001],{"class":192}," id",[175,2003,240],{"class":181},[175,2005,243],{"class":181},[175,2007,246],{"class":185},[175,2009,2010],{"class":177,"line":249},[175,2011,2012],{"class":321},"  \u002F\u002F ...controller, guard, retry by hand...\n",[175,2014,2015],{"class":177,"line":280},[175,2016,328],{"class":185},[339,2018,2019],{},[166,2020,2022],{"className":168,"code":2021,"language":170,"meta":171,"style":171},"const { data } = useFetch(url, { refetch: true }).json() \u002F\u002F abort-on-change, built in\n",[14,2023,2024],{"__ignoreMap":171},[175,2025,2026,2028,2030,2032,2034,2036,2038,2040,2042,2044,2046,2048],{"class":177,"line":178},[175,2027,777],{"class":181},[175,2029,1434],{"class":185},[175,2031,1437],{"class":192},[175,2033,1440],{"class":185},[175,2035,189],{"class":181},[175,2037,1445],{"class":206},[175,2039,1448],{"class":185},[175,2041,1369],{"class":192},[175,2043,1453],{"class":185},[175,2045,295],{"class":206},[175,2047,1458],{"class":185},[175,2049,2050],{"class":321},"\u002F\u002F abort-on-change, built in\n",[10,2052,2053,2054,912],{},"The three cases are three distinct fixes, not three flavors of one: co-locate in synchronous code, thread the parameter across async, or delegate the whole registry to a library that speaks ",[14,2055,1487],{},[10,2057,2058,2059,2061,2062,2064,2065,2067],{},"The four names were never four decisions. They are two ways into one registry, and the registry cares about one thing only: whether the registration call ran while the watcher was still executing synchronously. ",[14,2060,28],{}," reads that state from a module variable that's already been cleared by the time an awaited fetch resolves; the ",[14,2063,16],{}," parameter carries its watcher with it and never has to look. Reach for the global in synchronous code, and the parameter the instant an ",[14,2066,44],{}," enters the picture. The bug was never the request that wouldn't cancel. It was the cleanup registered to a watcher that had already left the room.",[47,2069,2071],{"id":2070},"sources","Sources",[536,2073,2074,2088,2098,2108,2123,2135,2145,2155],{},[539,2075,2076,2081,2082,2084,2085,2087],{},[31,2077,2080],{"href":2078,"rel":2079},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-async-data",[35],"Nuxt docs — useAsyncData"," — the ",[14,2083,516],{}," composable the pre-3.5 Nuxt cancel recipe wraps with an ",[14,2086,40],{}," signal.",[539,2089,2090,2094,2095,2097],{},[31,2091,2093],{"href":1491,"rel":2092},[35],"TanStack Query — Query Cancellation"," — ",[14,2096,1487],{},"-as-contract design and the opt-in default (no cancel unless the signal is forwarded).",[539,2099,2100,2104,2105,2107],{},[31,2101,2103],{"href":33,"rel":2102},[35],"Vue 3.5 release announcement (Vue team, September 2024)"," — introduction of ",[14,2106,28],{}," as a globally imported API.",[539,2109,2110,2094,2114,63,2117,2119,2120,2122],{},[31,2111,2113],{"href":764,"rel":2112},[35],"Vue core source — packages\u002Freactivity\u002Fsrc\u002Fwatch.ts",[14,2115,2116],{},"cleanupMap",[14,2118,982],{},", the ",[14,2121,28],{}," signature, and the no-active-watcher warning.",[539,2124,2125,2094,2129,2131,2132,2134],{},[31,2126,2128],{"href":592,"rel":2127},[35],"Vue docs — Reactivity API: Core",[14,2130,20],{}," \u002F ",[14,2133,28],{}," signatures and the synchronous-execution constraint.",[539,2136,2137,2141,2142,2144],{},[31,2138,2140],{"href":98,"rel":2139},[35],"Vue docs — Watchers guide"," — the stale-request rationale and the ",[14,2143,16],{},"-parameter instance-binding note.",[539,2146,2147,2151,2152,2154],{},[31,2148,2150],{"href":1206,"rel":2149},[35],"vuejs\u002Fdocs #3222 — onWatcherCleanup in async contexts"," — open issue documenting the after-",[14,2153,44],{}," footgun.",[539,2156,2157,2094,2161,2164,2165,2131,2167,2131,2169,2171],{},[31,2158,2160],{"href":1373,"rel":2159},[35],"VueUse — useFetch",[14,2162,2163],{},"refetch: true"," auto-cancel and the ",[14,2166,405],{},[14,2168,1472],{},[14,2170,1476],{}," surface.",[2173,2174,2175],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":171,"searchDepth":203,"depth":203,"links":2177},[2178,2179,2181,2182,2183,2185,2186,2187],{"id":49,"depth":196,"text":50},{"id":126,"depth":196,"text":2180},"The patterns that lost to AbortController",{"id":530,"depth":196,"text":531},{"id":753,"depth":196,"text":754},{"id":945,"depth":196,"text":2184},"onWatcherCleanup stops working after the first await",{"id":1348,"depth":196,"text":1349},{"id":1609,"depth":196,"text":1610},{"id":2070,"depth":196,"text":2071},"2026-07-22","Vue 3 exposes four things that look like four ways to cancel a stale request — the watch\u002FwatchEffect onCleanup parameter, the 3.5 onWatcherCleanup import, and AbortController. They're really two registration paths over one registry, and one of them silently no-ops after await. Here's the source-level reason, and which to reach for.","md",null,{},"\u002Farticles\u002Fcancelling-api-requests-vue-3",17,{"title":5,"description":2189},"articles\u002Fcancelling-api-requests-vue-3",[2198,2199,2200,2201],"Vue.js","Composition API","Reactivity","Async","yLDlxoRzqkZ4nvlFXBDniux8ygUZOkMtMRTGUMo3r4U",1784287454351]