Add fetch middleware; improve promise handling

This is for things like "on any unauthenticated request, redirect to the
login page". You can now add before/after fetch hooks:

```ts
Config.beforeFetch.push(function(url, options) {
  options.headers['some-new-header'] = 'foo'
})

Config.afterFetch.push(function(response, json) {
  if (response.status === 401) {
    throw('abort')
  }
})
```

Throwing `abort` will reject the promises as *all* promises are now
rejected: by throwing a RequestError or ResponseError class. These
classes have additional info (like the response object) on them for
additional introspection/handling.

```ts
author.save().catch((e) => {
  console.log(e.response.status);
})
```

Finally, this behavior can be overridden at the model level:

```ts
static beforeFetch(url: RequestInfo, options: RequestInit) {
 // your overrides here
 // call super if you want the Config hooks to run as well
}

static afterFetch(response: Response, json: JSON) {
 // your overrides here
 // call super if you want the Config hooks to run as well
}
```

Author: Lee Richmond

src/configuration.ts

@@ -17,6 +17,8 @@ export default class Config {
   static logger: Logger = new Logger();
   static jwtLocalStorage: string | false = 'jwt';
   static localStorage;
+  static beforeFetch: Array<Function> = []
+  static afterFetch: Array<Function> = []
 
   static setup(options? : Object) : void {
     if (!options) options = {};

src/model.ts

@@ -88,6 +88,18 @@ export default class Model {
     return options
   }
 
+  static beforeFetch(url: RequestInfo, options: RequestInit) : void {
+    Config.beforeFetch.forEach((fn) => {
+      fn(url, options)
+    })
+  }
+
+  static afterFetch(response: Response, json: JSON) : void {
+    Config.afterFetch.forEach((fn) => {
+      fn(response, json)
+    })
+  }
+
   static getJWTOwner() : typeof Model {
     if (this.isJWTOwner) {
       return this;
@@ -215,7 +227,7 @@ export default class Model {
       if (this.klass.camelizeKeys) {
         attributeName = camelize(key);
       }
-      
+
       if (key == 'id' || this.klass.attributeList[attributeName]) {
         this[attributeName] = attrs[key];
       }
@@ -281,7 +293,7 @@ export default class Model {
   destroy() : Promise<any> {
     let url     = this.klass.url(this.id);
     let verb    = 'delete';
-    let request = new Request();
+    let request = new Request(this.klass);
 
     let requestPromise = request.delete(url, this._fetchOptions());
     return this._writeRequest(requestPromise, () => {
@@ -292,7 +304,7 @@ export default class Model {
   save(options: Object = {}) : Promise<any> {
     let url     = this.klass.url();
     let verb    = 'post';
-    let request = new Request();
+    let request = new Request(this.klass);
     let payload = new WritePayload(this, options['with']);
 
     if (this.isPersisted()) {
@@ -304,7 +316,6 @@ export default class Model {
     let requestPromise = request[verb](url, json, this._fetchOptions());
     return this._writeRequest(requestPromise, (response) => {
       this.fromJsonapi(response['jsonPayload'].data, response['jsonPayload'], payload.includeDirective);
-      //this.isPersisted(true);
       payload.postProcess();
     });
   }
@@ -320,10 +331,9 @@ export default class Model {
 
   private _writeRequest(requestPromise : Promise<any>, callback: Function) : Promise<any> {
     return new Promise((resolve, reject) => {
-      requestPromise.catch((e) => { throw(e) });
       return requestPromise.then((response) => {
         this._handleResponse(response, resolve, reject, callback);
-      });
+      }).catch(reject)
     });
   }
 
@@ -333,8 +343,6 @@ export default class Model {
     if (response.status == 422) {
       ValidationErrors.apply(this, response['jsonPayload']);
       resolve(false);
-    } else if (response.status >= 500) {
-      reject('Server Error');
     } else {
       callback(response);
       resolve(true);

src/request.ts

@@ -1,7 +1,40 @@
 import Config from './configuration';
+import Model from './model';
 import colorize from './util/colorize';
+import patchExtends from './custom-extend';
+patchExtends()
+
+class RequestError extends Error {
+  url: string
+  options: RequestInit
+  originalError: Error
+
+  constructor(message: string, url: string, options: RequestInit, originalError: Error) {
+    super(message)
+    this.url = url
+    this.options = options
+    this.originalError = originalError
+  }
+}
+
+class ResponseError extends Error {
+  response: Response
+  originalError: Error
+
+  constructor(response: Response | null, message?: string, originalError?: Error) {
+    super(message || 'Invalid Response')
+    this.response = response
+    this.originalError = originalError
+  }
+}
 
 export default class Request {
+  modelClass: typeof Model
+
+  constructor(modelClass: typeof Model) {
+    this.modelClass = modelClass
+  }
+
   get(url : string, options: RequestInit) : Promise<any> {
     options.method = 'GET';
     return this._fetchWithLogging(url, options);
@@ -39,23 +72,54 @@ export default class Request {
   private _fetchWithLogging(url: string, options: RequestInit) : Promise<any> {
     this._logRequest(options.method, url);
     let promise = this._fetch(url, options);
-    promise.then((response : any) => {
+    return promise.then((response : any) => {
       this._logResponse(response['jsonPayload']);
+      return response
     });
-    return promise;
   }
 
   private _fetch(url: string, options: RequestInit) : Promise<any> {
     return new Promise((resolve, reject) => {
+      try {
+        this.modelClass.beforeFetch(url, options)
+      } catch(e) {
+        reject(new RequestError('beforeFetch failed; review Config.beforeFetch', url, options, e))
+      }
+
       let fetchPromise = fetch(url, options);
       fetchPromise.then((response) => {
-        response.json().then((json) => {
-          response['jsonPayload'] = json;
-          resolve(response);
-        }).catch((e) => { throw(e); });
+        this._handleResponse(response, resolve, reject)
       });
 
-      fetchPromise.catch(reject);
+      fetchPromise.catch((e) => {
+        // Fetch itself failed (usually network error)
+        reject(new ResponseError(null, e.message, e))
+      })
+    });
+  }
+
+  private _handleResponse(response: Response, resolve: Function, reject: Function) : void {
+    response.json().then((json) => {
+      try {
+        this.modelClass.afterFetch(response, json)
+      } catch(e) {
+        // afterFetch middleware failed
+        reject(new ResponseError(response, 'afterFetch failed; review Config.afterFetch', e))
+      }
+
+      if (response.status >= 500) {
+        reject(new ResponseError(response, 'Server Error'))
+      } else if (response.status !== 422 && json['data'] === undefined) {
+        // Bad JSON, for instance an errors payload
+        // Allow 422 since we specially handle validation errors
+        reject(new ResponseError(response, 'invalid json'))
+      }
+
+      response['jsonPayload'] = json;
+      resolve(response);
+    }).catch((e) => {
+      // The response was probably not in JSON format
+      reject(new ResponseError(response, 'invalid json', e))
     });
   }
 }

src/scope.ts

@@ -29,7 +29,7 @@ export default class Scope {
     return this._fetch(this.model.url()).then((json : japiDoc) => {
       let collection = new CollectionProxy<Model>(json);
       return collection;
-    });
+    })
   }
 
   find(id : string | number) : Promise<RecordProxy<Model>> {
@@ -215,16 +215,16 @@ export default class Scope {
   }
 
   private _fetch(url : string) : Promise<Object> {
-    let qp = this.toQueryParams();
+    let qp = this.toQueryParams()
     if (qp) {
-      url = `${url}?${qp}`;
+      url = `${url}?${qp}`
     }
-    let request = new Request();
+    let request = new Request(this.model)
     let fetchOpts = this.model.fetchOptions()
-
-    return request.get(url, fetchOpts).then((response) => {
-      refreshJWT(this.model, response);
-      return response['jsonPayload'];
-    });
+    let promise = request.get(url, fetchOpts)
+    return promise.then((response) => {
+      refreshJWT(this.model, response)
+      return response['jsonPayload']
+    })
   }
 }

test/fixtures.ts

@@ -106,6 +106,7 @@ const configSetup = function(opts = {}) {
 configSetup();
 
 export {
+  Config,
   configSetup,
   ApplicationRecord,
   TestJWTSubclass,