http request canceling +

lue-bird · Nov 24, 2023 · 2f5d3ee · 2f5d3ee
1 parent 3c693ab
commit 2f5d3ee
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/runner/http/fetch.ts b/runner/http/fetch.ts
@@ -1,18 +1,15 @@
 import { HttpResponse, HttpRequest, HttpError } from "./index.js";
 
-export function http(request: HttpRequest): Promise<HttpResponse> {
-    let controller: AbortController | undefined;
-
+export function http(request: HttpRequest, abortController: AbortController): Promise<HttpResponse> {
     if (request.timeout) {
-        controller = new AbortController();
-        setTimeout(() => controller?.abort(), request.timeout);
+        setTimeout(() => abortController?.abort(), request.timeout);
     }
 
     return fetch(request.url, {
         method: request.method,
         body: request.body || null,
         headers: new Headers(request.headers),
-        signal: controller?.signal,
+        signal: abortController?.signal,
     })
         .then((res: Response) => {
             const headers = Object.fromEntries(res.headers.entries());

diff --git a/runner/index.ts b/runner/index.ts
@@ -1,4 +1,5 @@
 import * as fetchAdapter from "./http/fetch.js";
+import { HttpRequest } from "./http/index.js";
 /*
 import {
     DomError,
@@ -61,7 +62,18 @@ export function start(ports: ElmPorts, appElement: HTMLElement) {
         {
             on: event => event?.addHttpRequest,
             run: (config, sendToElm) => {
-                fetchAdapter.http(config).then(response => { sendToElm(response) })
+                const abortController = new AbortController()
+                httpRequestAbortControllers[config] = abortController
+                fetchAdapter.http(config, abortController).then(response => { sendToElm(response) })
+            }
+        },
+        {
+            on: event => event?.removeHttpRequest,
+            run: (config, _sendToElm) => {
+                const maybeAbortController = httpRequestAbortControllers[config]
+                if (maybeAbortController != undefined) {
+                    maybeAbortController.abort()
+                }
             }
         },
         {
@@ -143,6 +155,8 @@ export function start(ports: ElmPorts, appElement: HTMLElement) {
     }
 }
 
+const httpRequestAbortControllers: { [key: string]: AbortController } = {}
+
 // Equivalent Elm Kernel code: https://github.com/elm/time/blob/1.0.0/src/Elm/Kernel/Time.js#L27-L35
 function getTimezoneName(): string | number {
     try {

diff --git a/src/BrowserApp.elm b/src/BrowserApp.elm
@@ -623,9 +623,8 @@ interfaceDiffToCmds =
                         ConsoleLog _ ->
                             Nothing
 
-                        HttpRequest _ ->
-                            -- cancel request? Help appreciated!
-                            Nothing
+                        HttpRequest request ->
+                            RemoveHttpRequest (request |> httpRequestToId) |> Just
 
                         DomNodeRender _ ->
                             RemoveDom |> Just
@@ -774,6 +773,9 @@ interfaceDiffToJson =
                 AddHttpRequest httpRequestId ->
                     ( "addHttpRequest", httpRequestId |> httpRequestIdToJson )
 
+                RemoveHttpRequest httpRequestId ->
+                    ( "removeHttpRequest", httpRequestId |> httpRequestIdToJson )
+
                 AddWindowEventListener eventName ->
                     ( "addWindowEventListener", eventName |> Json.Encode.string )
 
@@ -1373,6 +1375,7 @@ type InterfaceDiff
     | AddConsoleLog String
     | ReplaceDomNode { path : List Int, domNode : DomNodeId }
     | AddHttpRequest HttpRequestId
+    | RemoveHttpRequest HttpRequestId
     | RemoveDom
     | AddWindowEventListener String
     | RemoveWindowEventListener String