@lion/ajax - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.4.0](https://github.com/ing-bank/lion/compare/@lion/ajax@0.3.0...@lion/ajax@0.4.0) (2020-05-29)
+
+
+### Features
+
+* use markdown javascript (mdjs) for documentation ([bcd074d](https://github.com/ing-bank/lion/commit/bcd074d1fbce8754d428538df723ba402603e2c8))
+
+
+
+
+
 # [0.3.0](https://github.com/ing-bank/lion/compare/@lion/ajax@0.2.10...@lion/ajax@0.3.0) (2020-05-18)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/ajax",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Thin wrapper around axios to allow for custom interceptors",
@@ -17,2 +17,3 @@ "author": "ing-bank",
   "scripts": {
+    "start": "cd ../../ && yarn dev-server --open packages/ajax/README.md",
     "prepublishOnly": "../../scripts/npm-prepublish.js",
@@ -43,3 +44,3 @@ "test": "cd ../../ && yarn test:browser --grep \"packages/ajax/test/**/*.test.js\"",
   },
-  "gitHead": "f9ce60c08cf0c608f5f3a9ef9937c536f7782c11"
+  "gitHead": "94b87c80f5c734cd7d2d2ecd1c6598b22575717e"
 }

README.md

@@ -6,2 +6,12 @@ # Ajax
 
+```js script
+import { html } from 'lit-html';
+import { ajax } from './src/ajax.js';
+import { AjaxClass } from './src/AjaxClass.js';
+
+export default {
+  title: 'Others/Ajax',
+};
+```
+
 ## Live Demo/Documentation
@@ -11,2 +21,8 @@
 
+## Features
+
+- only JS functions, no (unnecessarily expensive) web components
+- supports GET, POST, PUT, DELETE, REQUEST, PATCH and HEAD methods
+- can be used with or without XSRF token
+
 ## How to use
@@ -16,6 +32,10 @@
 
-```sh
+```bash
 npm i --save @lion/ajax
 ```
 
+```js
+import { ajax, AjaxClass } from '@lion/ajax';
+```
+
 ### Example
@@ -28,1 +48,159 @@
 ```
+
+### Performing requests
+
+Performing a `GET` request:
+
+```js preview-story
+export const performingGetRequests = () => html`
+  <button
+    @click=${() => {
+      ajax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }}
+  >
+    Execute Request to Action Logger
+  </button>
+`;
+```
+
+To post data to the server, pass the data as the second argument in the `POST` request:
+
+```js
+const body = {
+  ant: {
+    type: 'insect',
+    limbs: 6,
+  },
+};
+ajax
+  .post('zooApi/animals/addAnimal', body)
+  .then(response => {
+    console.log(`POST successful: ${response.status} ${response.statusText}`);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+## Configuration
+
+### JSON prefix
+
+The called API might add a JSON prefix to the response in order to prevent hijacking.
+The prefix renders the string syntactically invalid as a script so that it cannot be hijacked.
+This prefix should be stripped before parsing the string as JSON.
+Pass the prefix with the `jsonPrefix` option.
+
+```js
+const myAjax = AjaxClass.getNewInstance({ jsonPrefix: ")]}'," });
+myAjax
+  .get('./packages/ajax/docs/assets/data.json')
+  .then(response => {
+    console.log(response.data);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+### Additional headers
+
+Add additional headers to the requests with the `headers` option.
+
+```js preview-story
+export const additionalHeaders = () => html`
+  <button
+    @click=${() => {
+      const myAjax = AjaxClass.getNewInstance({ headers: { 'MY-HEADER': 'SOME-HEADER-VALUE' } });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }}
+  >
+    Execute Request to Action Logger
+  </button>
+`;
+```
+
+When executing the request above, check the Network tab in the Browser's dev tools and look for the Request Header on the GET call.
+
+### Cancelable Request
+
+It is possible to make an Ajax request cancelable, and then call `cancel()` to make the request provide a custom error once fired.
+
+```js preview-story
+export const cancelableRequests = () => html`
+  <button
+    @click=${() => {
+      const myAjax = AjaxClass.getNewInstance({ cancelable: true });
+      requestAnimationFrame(() => {
+        myAjax.cancel('too slow');
+      });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }}
+  >
+    Execute Request to Action Logger
+  </button>
+`;
+```
+
+### Cancel concurrent requests
+
+You can cancel concurrent requests with the `cancelPreviousOnNewRequest` option.
+
+```js preview-story
+export const cancelConcurrentRequests = () => html`
+  <button
+    @click=${() => {
+      const myAjax = AjaxClass.getNewInstance({ cancelPreviousOnNewRequest: true });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error.message);
+        });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error.message);
+        });
+    }}
+  >
+    Execute Both Requests to Action Logger
+  </button>
+`;
+```
+
+## Considerations
+
+Due to a [bug in axios](https://github.com/axios/axios/issues/385) options may leak in to other instances.
+So please avoid setting global options in axios. Interceptors have no issues.
+
+## Future plans
+
+- Eventually we want to remove axios and replace it with [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- This wrapper exist to prevent this switch from causing breaking changes for our users

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

203

increased by712%

Worsened metrics

Total package byte prevSize

48548

decreased by-3.35%

Number of package files

15

decreased by-6.25%

No dependency changes