lib/router: improve aborting xhr

lib/router.js

@@ -120,41 +120,27 @@ export default class Router {
     const route = toRoute(parse(url).pathname)
 
     let data = this.components[route]
-    if (data) return data
+    if (!data) {
+      let cancel
 
-    let cancel
-    let cancelled = false
+      const componentUrl = toJSONUrl(route)
+      data = await new Promise((resolve, reject) => {
+        this.componentLoadCancel = cancel = () => {
+          if (xhr.abort) xhr.abort()
+        }
 
-    const componentUrl = toJSONUrl(route)
-    data = await new Promise((resolve, reject) => {
-      this.componentLoadCancel = cancel = () => {
-        cancelled = true
-        if (xhr.abort) xhr.abort()
+        const xhr = loadComponent(componentUrl, (err, data) => {
+          if (err) return reject(err)
+          resolve({ ...data, ctx: { xhr } })
+        })
+      })
 
-        const err = new Error('Cancelled')
-        err.cancelled = true
-        reject(err)
+      if (cancel === this.componentLoadCancel) {
+        this.componentLoadCancel = null
       }
 
-      const xhr = loadComponent(componentUrl, (err, data) => {
-        if (err) return reject(err)
-        resolve({ ...data, ctx: { xhr } })
-      })
-    })
-
-    if (cancel === this.componentLoadCancel) {
-      this.componentLoadCancel = null
+      this.components[route] = data
     }
-
-    // we update the cache even if cancelled
-    if (data) this.components[route] = data
-
-    if (cancelled) {
-      const err = new Error('Cancelled')
-      err.cancelled = true
-      throw err
-    }
-
     return data
   }
 
@@ -242,6 +228,11 @@ function loadJSON (url, fn) {
   xhr.onerror = () => {
     fn(new Error('XHR failed. Status: ' + xhr.status))
   }
+  xhr.onabort = () => {
+    const err = new Error('XHR aborted')
+    err.cancelled = true
+    fn(err)
+  }
   xhr.open('GET', url)
   xhr.send()