Merge branch 'shorthand-verbs' of https://github.com/adrienpoly/request.js into shorthand-verbs

Author: adrienpoly

.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  qa:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12'
+      - uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+      - run: yarn install
+      - name: Lint
+        run: yarn lint

README.md

@@ -15,17 +15,17 @@ yarn add @rails/request.js
 
 # How to use
 
-Just import the `Request` class from the package and instantiate it passing the request `method`, `url`, `options`,  then call `await request.perform()` and do what do you need with the response.
+Just import the `FetchRequest` class from the package and instantiate it passing the request `method`, `url`, `options`,  then call `await request.perform()` and do what do you need with the response.
 
 Example:
 
 ```js
-import { Request } from '@rails/request.js'
+import { FetchRequest } from '@rails/request.js'
 
 ....
 
 async myMethod () {
-  const request = new Request('post', 'localhost:3000/my_endpoint', { body: { name: 'Request.JS' }})
+  const request = new FetchRequest('post', 'localhost:3000/my_endpoint', { body: { name: 'Request.JS' }})
   const response = await request.perform()
   if (response.ok) {
     const body = await response.text
@@ -64,6 +64,35 @@ import { Turbo } from "@hotwired/turbo-rails"
 window.Turbo = Turbo
 ```
 
+#### Request Interceptor
+
+To authenticate fetch requests (eg. with Bearer token) you can use request interceptor. It allows pausing request invocation for fetching token and then adding it to headers:
+
+```javascript
+import { RequestInterceptor } from '@rails/request.js'
+// ...
+
+// Set interceptor
+RequestInterceptor.register(async (request) => {
+  const token = await getSessionToken(window.app)
+  request.addHeader('Authorization', `Bearer ${token}`)
+})
+
+// Reset interceptor
+RequestInterceptor.reset()
+```
+
+# Known Issues
+
+`FetchRequest` sets a `"X-Requested-With": "XmlHttpRequest"` header. If you have not upgraded to Turbo and still use `Turbolinks` in your Gemfile, this means
+you will not be able to check if the request was redirected.
+
+```js
+  const request = new FetchRequest('post', 'localhost:3000/my_endpoint', { body: { name: 'Request.JS' }})
+  const response = await request.perform()
+  response.redirected // => will always be false.
+```
+
 # License
 
 Rails Request.JS is released under the [MIT License](LICENSE).

src/request.js renamed to src/fetch_request.js

@@ -1,15 +1,24 @@
-import { Response } from './response'
+import { FetchResponse } from './fetch_response'
+import { RequestInterceptor } from './request_interceptor'
 import { getCookie } from './lib/cookie'
 
-export class Request {
+export class FetchRequest {
   constructor (method, url, options = {}) {
     this.method = method
     this.url = url
     this.options = options
   }
 
   async perform () {
-    const response = new Response(await window.fetch(this.url, this.fetchOptions))
+    try {
+      const requestInterceptor = RequestInterceptor.get()
+      if (requestInterceptor) {
+        await requestInterceptor(this)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+    const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions))
     if (response.unauthenticated && response.authenticationURL) {
       return Promise.reject(window.location.href = response.authenticationURL)
     } else {
@@ -18,6 +27,12 @@ export class Request {
     }
   }
 
+  addHeader (key, value) {
+    const headers = this.additionalHeaders
+    headers[key] = value
+    this.options.headers = headers
+  }
+
   get fetchOptions () {
     return {
       method: this.method.toUpperCase(),

src/response.js renamed to src/fetch_response.js

@@ -1,4 +1,4 @@
-export class Response {
+export class FetchResponse {
   constructor (response) {
     this.response = response
   }
@@ -55,7 +55,7 @@ export class Response {
   async renderTurboStream () {
     if (this.isTurboStream) {
       if (window.Turbo) {
-        Turbo.renderStreamMessage(await this.text)
+        window.Turbo.renderStreamMessage(await this.text)
       } else {
         console.warn('You must set `window.Turbo = Turbo` to automatically process Turbo Stream events with request.js')
       }

src/index.js

@@ -1,5 +1,6 @@
-import { Request } from './request'
-import { Response } from './response'
-import {get, post, put, patch, destroy} from './verbs'
+import { FetchRequest } from './fetch_request'
+import { FetchResponse } from './fetch_response'
+import { RequestInterceptor } from './request_interceptor'
+import { get, post, put, patch, destroy } from './verbs'
 
-export { Request, Response, get, post, put, patch, destroy}
+export { FetchRequest, FetchResponse, RequestInterceptor, get, post, put, patch, destroy }

src/request_interceptor.js

@@ -0,0 +1,13 @@
+export class RequestInterceptor {
+  static register (interceptor) {
+    this.interceptor = interceptor
+  }
+
+  static get () {
+    return this.interceptor
+  }
+
+  static reset () {
+    this.interceptor = undefined
+  }
+}