[add] ImageLoader.loadUsingHeaders

Move header loading logic here

Author: kidroca

packages/react-native-web/src/exports/Image/index.js

@@ -8,7 +8,8 @@
  * @flow
  */
 
-import type { ImageProps, SourceObject } from './types';
+import type { ImageSource, LoadRequest } from '../../modules/ImageLoader';
+import type { ImageProps } from './types';
 
 import * as React from 'react';
 import createElement from '../createElement';
@@ -146,7 +147,17 @@ function resolveAssetUri(source): ?string {
   return uri;
 }
 
-function hasSourceDiff(a: SourceObject, b: SourceObject) {
+function raiseOnErrorEvent(uri, { onError, onLoadEnd }) {
+  if (onError) {
+    onError({
+      nativeEvent: {
+        error: `Failed to load resource ${uri} (404)`
+      }
+    });
+  }
+  if (onLoadEnd) onLoadEnd();
+}
+function hasSourceDiff(a: ImageSource, b: ImageSource) {
   return (
     a.uri !== b.uri || JSON.stringify(a.headers) !== JSON.stringify(b.headers)
   );
@@ -287,16 +298,7 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
         },
         function error() {
           updateState(ERRORED);
-          if (onError) {
-            onError({
-              nativeEvent: {
-                error: `Failed to load resource ${uri} (404)`
-              }
-            });
-          }
-          if (onLoadEnd) {
-            onLoadEnd();
-          }
+          raiseOnErrorEvent(uri, { onError, onLoadEnd });
         }
       );
     }
@@ -345,55 +347,35 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
  */
 const ImageWithHeaders: ImageComponent = React.forwardRef((props, ref) => {
   // $FlowIgnore
-  const nextSource: SourceObject = props.source;
-  const prevSource = React.useRef<SourceObject>({});
-  const cleanup = React.useRef<Function>(() => {});
+  const nextSource: ImageSource = props.source;
   const [blobUri, setBlobUri] = React.useState('');
+  const request = React.useRef<LoadRequest>({
+    cancel: () => {},
+    source: { uri: '', headers: {} },
+    promise: Promise.resolve('')
+  });
 
-  const { onError, onLoadStart } = props;
+  const { onError, onLoadStart, onLoadEnd } = props;
 
   React.useEffect(() => {
-    if (!hasSourceDiff(nextSource, prevSource.current)) return;
+    if (!hasSourceDiff(nextSource, request.current.source)) return;
 
     // When source changes we want to clean up any old/running requests
-    cleanup.current();
+    request.current.cancel();
 
-    prevSource.current = nextSource;
+    if (onLoadStart) onLoadStart();
 
-    let uri;
-    const abortCtrl = new AbortController();
-    const request = new Request(nextSource.uri, {
-      headers: nextSource.headers,
-      signal: abortCtrl.signal
-    });
-    request.headers.append('accept', 'image/*');
+    request.current = ImageLoader.loadWithHeaders(nextSource);
 
-    if (onLoadStart) onLoadStart();
+    request.current.promise
+      .then((uri) => setBlobUri(uri))
+      .catch(() =>
+        raiseOnErrorEvent(request.current.source.uri, { onError, onLoadEnd })
+      );
+  }, [nextSource, onLoadStart, onError, onLoadEnd]);
 
-    fetch(request)
-      .then((response) => response.blob())
-      .then((blob) => {
-        uri = URL.createObjectURL(blob);
-        setBlobUri(uri);
-      })
-      .catch((error) => {
-        if (error.name !== 'AbortError' && onError) {
-          onError({ nativeEvent: error.message });
-        }
-      });
-
-    // Capture a cleanup function for the current request
-    // The reason for using a Ref is to avoid making this function a dependency
-    // Because the change of a dependency would otherwise would re-trigger a hook
-    cleanup.current = () => {
-      abortCtrl.abort();
-      setBlobUri('');
-      URL.revokeObjectURL(uri);
-    };
-  }, [nextSource, onLoadStart, onError]);
-
-  // Run the cleanup function on unmount
-  React.useEffect(() => cleanup.current, []);
+  // Cancel any request on unmount
+  React.useEffect(() => request.current.cancel, []);
 
   const propsToPass = {
     ...props,

packages/react-native-web/src/exports/Image/types.js

@@ -20,7 +20,7 @@ import type {
   TransformStyles
 } from '../../types/styles';
 
-export type SourceObject = {
+type SourceObject = {
   /**
    * `body` is the HTTP body to send with the request. This must be a valid
    * UTF-8 string, and will be sent exactly as specified, with no

packages/react-native-web/src/modules/ImageLoader/index.js

@@ -144,8 +144,43 @@ const ImageLoader = {
     };
     image.src = uri;
     requests[`${id}`] = image;
+
     return id;
   },
+  loadWithHeaders(source: ImageSource): LoadRequest {
+    let loadRequest: LoadRequest;
+    let uri: string;
+    const abortCtrl = new AbortController();
+    const request = new Request(source.uri, {
+      headers: source.headers,
+      signal: abortCtrl.signal
+    });
+    request.headers.append('accept', 'image/*');
+
+    const promise = fetch(request)
+      .then((response) => response.blob())
+      .then((blob) => {
+        uri = URL.createObjectURL(blob);
+        return uri;
+      })
+      .catch((error) => {
+        if (error.name === 'AbortError') {
+          return '';
+        }
+
+        throw error;
+      });
+
+    return {
+      promise,
+      source,
+      cancel: () => {
+        abortCtrl.abort();
+        if (loadRequest) loadRequest.cancel();
+        URL.revokeObjectURL(uri);
+      }
+    };
+  },
   prefetch(uri: string): Promise<void> {
     return new Promise((resolve, reject) => {
       ImageLoader.load(
@@ -172,4 +207,15 @@ const ImageLoader = {
   }
 };
 
+export type LoadRequest = {|
+  cancel: Function,
+  source: ImageSource,
+  promise: Promise<string>
+|};
+
+export type ImageSource = {
+  uri: string,
+  headers: { [key: string]: string }
+};
+
 export default ImageLoader;