fix for infinite loop

Author: joetannenbaum

packages/core/src/request.ts

@@ -10,6 +10,7 @@ export class Request {
   protected response!: AxiosResponse
   protected cancelToken!: AbortController
   protected requestParams: RequestParams
+  protected requestHasFinished = false
 
   constructor(
     params: ActiveVisit,
@@ -72,6 +73,13 @@ export class Request {
   }
 
   protected fireFinishEvents(): void {
+    if (this.requestHasFinished) {
+      // This could be called from multiple places, don't let it re-fire
+      return
+    }
+
+    this.requestHasFinished = true
+
     fireFinishEvent(this.requestParams.all())
     this.requestParams.onFinish()
   }

playgrounds/vue3/resources/js/Pages/Async.vue

@@ -78,6 +78,27 @@ const triggerCancel = () => {
   )
 }
 
+const triggerCancelAfterFinish = () => {
+  let cancelToken
+
+  router.post(
+    '/sleepy/1',
+    {},
+    {
+      onCancelToken: (token) => {
+        console.log('onCancelToken')
+
+        cancelToken = token
+      },
+      onFinish: () => {
+        console.log('onFinish')
+        console.log('CANCELLING!')
+        cancelToken.cancel()
+      },
+    },
+  )
+}
+
 watch(reloadCount, () => {
   console.log('watched reload count value', reloadCount.value)
 })
@@ -125,5 +146,11 @@ watch(reloadCount, () => {
       <p>Trigger an automatic cancellation from the token.</p>
       <button @click="triggerCancel" class="px-4 py-2 text-white bg-green-600 rounded">Trigger Cancel</button>
     </div>
+    <div class="p-4 space-y-4 text-sm text-gray-500 border border-gray-300 rounded">
+      <p>Trigger an automatic cancellation from the token after finishing request.</p>
+      <button @click="triggerCancelAfterFinish" class="px-4 py-2 text-white bg-green-600 rounded">
+        Trigger Cancel After Finish
+      </button>
+    </div>
   </div>
 </template>