Create AbortController with each promise and pass it along to the promiseFn/deferFn. Call abort() when starting a new promise.

ghengeveld · ghengeveld · commit 9fa5e48abbf4 · 2019-01-01T19:16:40.000+01:00
diff --git a/examples/with-abortcontroller/.env b/examples/with-abortcontroller/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/with-abortcontroller/README.md b/examples/with-abortcontroller/README.md
@@ -0,0 +1,5 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/ghengeveld/react-async/tree/master/examples/basic-fetch)
+
+# Basic fetch with React Async
+
+This demonstrates a very simple HTTP GET using `fetch`, wrapped with React Async.
diff --git a/examples/with-abortcontroller/now.json b/examples/with-abortcontroller/now.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
+  "routes": [
+    { "src": "^/static/(.*)", "dest": "/static/$1" },
+    { "src": "^/favicon.ico", "dest": "/favicon.ico" },
+    { "src": "^/(.*)", "dest": "/index.html" }
+  ]
+}
diff --git a/examples/with-abortcontroller/package.json b/examples/with-abortcontroller/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "basic-fetch",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "16.7.0-alpha.2",
+    "react-async": "latest",
+    "react-dom": "16.7.0-alpha.2",
+    "react-scripts": "2.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "now-build": "npm run build && mv build dist"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/examples/with-abortcontroller/public/favicon.ico b/examples/with-abortcontroller/public/favicon.ico
diff --git a/examples/with-abortcontroller/public/index.html b/examples/with-abortcontroller/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/with-abortcontroller/src/index.css b/examples/with-abortcontroller/src/index.css
@@ -0,0 +1,20 @@
+body {
+  margin: 20px;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+button {
+  background: none;
+  color: palevioletred;
+  border: 2px solid palevioletred;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 0.9em;
+  font-weight: bold;
+  outline: 0;
+  text-transform: uppercase;
+}
diff --git a/examples/with-abortcontroller/src/index.js b/examples/with-abortcontroller/src/index.js
@@ -0,0 +1,25 @@
+import React from "react"
+import { useAsync } from "react-async"
+import ReactDOM from "react-dom"
+import "./index.css"
+
+const download = (event, props, controller) =>
+  fetch(`https://reqres.in/api/users/1?delay=3`, { signal: controller.signal })
+    .then(res => (res.ok ? res : Promise.reject(res)))
+    .then(res => res.json())
+
+const App = () => {
+  const { run, cancel, isLoading } = useAsync({ deferFn: download })
+  return (
+    <>
+      {isLoading ? <button onClick={cancel}>cancel</button> : <button onClick={run}>start</button>}
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <p>Inspect network traffic to see requests being canceled.</p>
+      )}
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/src/index.js b/src/index.js
@@ -14,6 +14,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     constructor(props) {
       super(props)
 
+      this.start = this.start.bind(this)
       this.load = this.load.bind(this)
       this.run = this.run.bind(this)
       this.cancel = this.cancel.bind(this)
@@ -30,6 +31,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       this.mounted = false
       this.counter = 0
       this.args = []
+      this.abortController = { abort: () => {} }
       this.state = {
         initialValue,
         data: initialData,
@@ -66,28 +68,39 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       this.mounted = false
     }
 
+    start() {
+      if ("AbortController" in window) {
+        this.abortController.abort()
+        this.abortController = new window.AbortController()
+      }
+      this.counter++
+      this.setState({ isLoading: true, startedAt: new Date(), finishedAt: undefined })
+    }
+
     load() {
       const promiseFn = this.props.promiseFn || defaultProps.promiseFn
       if (!promiseFn) return
-      this.counter++
-      this.setState({ isLoading: true, startedAt: new Date(), finishedAt: undefined })
-      return promiseFn(this.props).then(this.onResolve(this.counter), this.onReject(this.counter))
+      this.start()
+      return promiseFn(this.props, this.abortController).then(
+        this.onResolve(this.counter),
+        this.onReject(this.counter)
+      )
     }
 
     run(...args) {
       const deferFn = this.props.deferFn || defaultProps.deferFn
       if (!deferFn) return
-      this.counter++
       this.args = args
-      this.setState({ isLoading: true, startedAt: new Date(), finishedAt: undefined })
-      return deferFn(...args, this.props).then(
+      this.start()
+      return deferFn(...args, this.props, this.abortController).then(
         this.onResolve(this.counter),
         this.onReject(this.counter)
       )
     }
 
     cancel() {
       this.counter++
+      this.abortController.abort()
       this.setState({ isLoading: false, startedAt: undefined })
     }
 
diff --git a/src/useAsync.js b/src/useAsync.js
@@ -4,6 +4,7 @@ const useAsync = (opts, init) => {
   const counter = useRef(0)
   const isMounted = useRef(true)
   const lastArgs = useRef(undefined)
+  const abortController = useRef({ abort: () => {} })
 
   const options = typeof opts === "function" ? { promiseFn: opts, initialValue: init } : opts
   const { promiseFn, deferFn, initialValue, onResolve, onReject, watch } = options
@@ -35,6 +36,10 @@ const useAsync = (opts, init) => {
   const handleReject = count => error => count === counter.current && handleError(error, onReject)
 
   const start = () => {
+    if ("AbortController" in window) {
+      abortController.current.abort()
+      abortController.current = new window.AbortController()
+    }
     counter.current++
     setState(state => ({
       ...state,
@@ -47,15 +52,18 @@ const useAsync = (opts, init) => {
     const isPreInitialized = initialValue && counter.current === 0
     if (promiseFn && !isPreInitialized) {
       start()
-      return promiseFn(options).then(handleResolve(counter.current), handleReject(counter.current))
+      return promiseFn(options, abortController.current).then(
+        handleResolve(counter.current),
+        handleReject(counter.current)
+      )
     }
   }
 
   const run = (...args) => {
     if (deferFn) {
-      start()
       lastArgs.current = args
-      return deferFn(...args, options).then(
+      start()
+      return deferFn(...args, options, abortController.current).then(
         handleResolve(counter.current),
         handleReject(counter.current)
       )
@@ -64,6 +72,7 @@ const useAsync = (opts, init) => {
 
   useEffect(() => load() && undefined, [promiseFn, watch])
   useEffect(() => () => (isMounted.current = false), [])
+  useEffect(() => abortController.current.abort, [])
 
   return useMemo(
     () => ({
@@ -74,6 +83,7 @@ const useAsync = (opts, init) => {
       reload: () => (lastArgs.current ? run(...lastArgs.current) : load()),
       cancel: () => {
         counter.current++
+        abortController.current.abort()
         setState(state => ({ ...state, startedAt: undefined }))
       },
       setData: handleData,
