Support abort API

.jshintrc

@@ -20,6 +20,7 @@
   "worker": true,
   "globals": {
     "JSON": false,
-    "URLSearchParams": false
+    "URLSearchParams": false,
+    "AbortController": false
   }
 }

README.md

@@ -24,6 +24,7 @@ expected to uphold this code.
     * [Sending cookies](#sending-cookies)
     * [Receiving cookies](#receiving-cookies)
     * [Obtaining the Response URL](#obtaining-the-response-url)
+    * [Aborting requests](#aborting-requests)
 * [Browser Support](#browser-support)
 
 ## Read this first
@@ -260,6 +261,36 @@ response.headers['X-Request-URL'] = request.url
 This server workaround is necessary if you need reliable `response.url` in
 Firefox < 32, Chrome < 37, Safari, or IE.
 
+#### Aborting requests
+
+This polyfill supports
+[the abortable fetch API](https://developers.google.com/web/updates/2017/09/abortable-fetch).
+However, aborting a fetch requires use of two additional DOM APIs:
+[AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
+and
+[AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).
+Typically, browsers that do not support fetch will also not support
+AbortController or AbortSignal. Consequently, you will need to include an
+additional polyfill for these APIs to abort fetches.
+
+Once you have an AbortController and AbortSignal polyfill in place, you can
+abort a fetch like so:
+
+```js
+const controller = new AbortController()
+
+fetch('/avatars', {
+  signal: controller.signal
+}).catch(function(ex) {
+  if (ex.name === 'AbortError') {
+    console.log('request aborted')
+  }
+})
+
+// some time later...
+controller.abort();
+```
+
 ## Browser Support
 
 - Chrome

fetch.js

@@ -317,6 +317,7 @@
       }
       this.method = input.method
       this.mode = input.mode
+      this.signal = input.signal
       if (!body && input._bodyInit != null) {
         body = input._bodyInit
         input.bodyUsed = true
@@ -331,6 +332,7 @@
     }
     this.method = normalizeMethod(options.method || this.method || 'GET')
     this.mode = options.mode || this.mode || null
+    this.signal = options.signal || this.signal
     this.referrer = null
 
     if ((this.method === 'GET' || this.method === 'HEAD') && body) {
@@ -415,15 +417,38 @@
     return new Response(null, {status: status, headers: {location: url}})
   }
 
+  var DOMException = self.DOMException
+  try {
+    new DOMException()
+  } catch(err) {
+    DOMException = function(message, name) {
+      this.message = message
+      this.name = name
+      var error = Error(message)
+      this.stack = error.stack
+    }
+    DOMException.prototype = Object.create(Error.prototype)
+    DOMException.prototype.constructor = DOMException
+  }
+
   self.Headers = Headers
   self.Request = Request
   self.Response = Response
 
   self.fetch = function(input, init) {
     return new Promise(function(resolve, reject) {
       var request = new Request(input, init)
+
+      if (request.signal && request.signal.aborted) {
+        return reject(new DOMException('Aborted', 'AbortError'))
+      }
+
       var xhr = new XMLHttpRequest()
 
+      function abortXhr() {
+        xhr.abort()
+      }
+
       xhr.onload = function() {
         var options = {
           status: xhr.status,
@@ -443,6 +468,10 @@
         reject(new TypeError('Network request failed'))
       }
 
+      xhr.onabort = function() {
+        reject(new DOMException('Aborted', 'AbortError'))
+      }
+
       xhr.open(request.method, request.url, true)
 
       if (request.credentials === 'include') {
@@ -459,6 +488,17 @@
         xhr.setRequestHeader(name, value)
       })
 
+      if (request.signal) {
+        request.signal.addEventListener('abort', abortXhr)
+
+        xhr.onreadystatechange = function() {
+          // DONE (success or failure)
+          if (xhr.readyState === 4) {
+            request.signal.removeEventListener('abort', abortXhr)
+          }
+        }
+      }
+
       xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit)
     })
   }

package.json

@@ -6,6 +6,7 @@
   "repository": "github/fetch",
   "license": "MIT",
   "devDependencies": {
+    "abortcontroller-polyfill": "1.1.2",
     "chai": "1.10.0",
     "jshint": "2.8.0",
     "mocha": "2.1.0",

script/server

@@ -80,6 +80,12 @@ var routes = {
     res.writeHead(204);
     res.end();
   },
+  '/slow': function(res) {
+    setTimeout(function() {
+      res.writeHead(200);
+      res.end();
+    }, 100);
+  },
   '/error': function(res) {
     res.destroy();
   },

test/test.html

@@ -33,6 +33,7 @@
   </script>
 
   <script src="/node_modules/promise-polyfill/promise.js"></script>
+  <script src="/node_modules/abortcontroller-polyfill/dist/abortcontroller.js"></script>
   <script src="/test/test.js"></script>
   <script src="/fetch.js"></script>
 

test/test.js

@@ -952,6 +952,120 @@ suite('fetch method', function() {
     })
   })
 
+  suite('aborting', function() {
+    test('initially aborted signal', function() {
+      var controller = new AbortController()
+      controller.abort()
+
+      return fetch('/request', {
+        signal: controller.signal
+      }).then(function() {
+        assert.ok(false)
+      }, function(error) {
+        assert.equal(error.name, 'AbortError')
+      })
+    })
+
+    test('initially aborted signal within Request', function () {
+      var controller = new AbortController()
+      controller.abort()
+
+      var request = new Request('/request', { signal: controller.signal })
+
+      return fetch(request).then(function() {
+        assert.ok(false)
+      }, function(error) {
+        assert.equal(error.name, 'AbortError')
+      })
+    })
+
+    test('mid-request', function() {
+      var controller = new AbortController()
+
+      setTimeout(function() {
+        controller.abort()
+      }, 30)
+
+      return fetch('/slow', {
+        signal: controller.signal
+      }).then(function() {
+        assert.ok(false)
+      }, function(error) {
+        assert.equal(error.name, 'AbortError')
+      })
+    })
+
+    test('mid-request within Request', function() {
+      var controller = new AbortController()
+      var request = new Request('/slow', { signal: controller.signal })
+
+      setTimeout(function() {
+        controller.abort()
+      }, 30)
+
+      return fetch(request).then(function() {
+        assert.ok(false)
+      }, function(error) {
+        assert.equal(error.name, 'AbortError')
+      })
+    })
+
+    test('abort multiple with same signal', function() {
+      var controller = new AbortController()
+
+      setTimeout(function() {
+        controller.abort()
+      }, 30)
+
+      return Promise.all([
+        fetch('/slow', {
+          signal: controller.signal
+        }).then(function() {
+          assert.ok(false)
+        }, function(error) {
+          assert.equal(error.name, 'AbortError')
+        }),
+        fetch('/slow', {
+          signal: controller.signal
+        }).then(function() {
+          assert.ok(false)
+        }, function(error) {
+          assert.equal(error.name, 'AbortError')
+        })
+      ])
+    })
+
+    test('does not leak memory', function() {
+      var controller = new AbortController()
+      var signal = controller.signal
+
+      // success
+      return fetch('/request', {
+        signal: signal
+      }).then(function() {
+        assert.deepEqual(signal.listeners['abort'], [])
+      }).then(function () {
+        // failure
+        return fetch('/boom', {
+          signal: signal
+        }).catch(function() {
+          assert.deepEqual(signal.listeners['abort'], [])
+        })
+      }).then(function () {
+        // aborted
+        setTimeout(function() {
+          signal.dispatchEvent({ type: 'abort' })
+        }, 30)
+
+        return fetch('/slow', {
+          signal: signal
+        }).catch(function() {
+          assert.deepEqual(signal.listeners['abort'], [])
+        })
+      })
+    })
+  })
+
   suite('response', function() {
     test('populates body', function() {
       return fetch('/hello').then(function(response) {

test/worker.js

@@ -5,6 +5,7 @@ mocha.setup('tdd')
 self.assert = chai.assert
 
 importScripts('/node_modules/promise-polyfill/promise.js')
+importScripts('/node_modules/abortcontroller-polyfill/dist/abortcontroller.js')
 importScripts('/test/test.js')
 importScripts('/fetch.js')