Implement abort controller signals to fetch methods, and allow storage list endpoint to receive a signal parameter

Author: joshen-supabase

src/lib/storage/StorageFileApi.ts

@@ -226,13 +226,17 @@ export class StorageFileApi {
    */
   async list(
     path?: string,
-    options?: SearchOptions
+    options?: SearchOptions,
+    signal?: AbortSignal
   ): Promise<{ data: FileObject[] | null; error: Error | null }> {
     try {
       const body = { ...DEFAULT_SEARCH_OPTIONS, ...options, prefix: path || '' }
-      const data = await post(`${this.url}/object/list/${this.bucketId}`, body, {
-        headers: this.headers,
-      })
+      const data = await post(
+        `${this.url}/object/list/${this.bucketId}`,
+        body,
+        { headers: this.headers },
+        signal
+      )
       return { data, error: null }
     } catch (error) {
       return { data: null, error }

src/lib/storage/fetch.ts

@@ -24,7 +24,12 @@ const handleError = (error: any, reject: any) => {
   })
 }
 
-const _getRequestParams = (method: RequestMethodType, options?: FetchOptions, body?: object) => {
+const _getRequestParams = (
+  method: RequestMethodType,
+  options?: FetchOptions,
+  signal?: AbortSignal,
+  body?: object
+) => {
   const params: { [k: string]: any } = { method, headers: options?.headers || {} }
 
   if (method === 'GET') {
@@ -34,17 +39,22 @@ const _getRequestParams = (method: RequestMethodType, options?: FetchOptions, bo
   params.headers = { 'Content-Type': 'application/json', ...options?.headers }
   params.body = JSON.stringify(body)
 
+  if (signal) {
+    params.signal = signal
+  }
+
   return params
 }
 
 async function _handleRequest(
   method: RequestMethodType,
   url: string,
   options?: FetchOptions,
+  signal?: AbortSignal,
   body?: object
 ): Promise<any> {
   return new Promise((resolve, reject) => {
-    fetch(url, _getRequestParams(method, options, body))
+    fetch(url, _getRequestParams(method, options, signal, body))
       .then((result) => {
         if (!result.ok) throw result
         if (options?.noResolveJson) return resolve(result)
@@ -55,18 +65,33 @@ async function _handleRequest(
   })
 }
 
-export async function get(url: string, options?: FetchOptions): Promise<any> {
-  return _handleRequest('GET', url, options)
+export async function get(url: string, options?: FetchOptions, signal?: AbortSignal): Promise<any> {
+  return _handleRequest('GET', url, options, signal)
 }
 
-export async function post(url: string, body: object, options?: FetchOptions): Promise<any> {
-  return _handleRequest('POST', url, options, body)
+export async function post(
+  url: string,
+  body: object,
+  options?: FetchOptions,
+  signal?: AbortSignal
+): Promise<any> {
+  return _handleRequest('POST', url, options, signal, body)
 }
 
-export async function put(url: string, body: object, options?: FetchOptions): Promise<any> {
-  return _handleRequest('PUT', url, options, body)
+export async function put(
+  url: string,
+  body: object,
+  options?: FetchOptions,
+  signal?: AbortSignal
+): Promise<any> {
+  return _handleRequest('PUT', url, options, signal, body)
 }
 
-export async function remove(url: string, body: object, options?: FetchOptions): Promise<any> {
-  return _handleRequest('DELETE', url, options, body)
+export async function remove(
+  url: string,
+  body: object,
+  options?: FetchOptions,
+  signal?: AbortSignal
+): Promise<any> {
+  return _handleRequest('DELETE', url, options, signal, body)
 }