feat: add useFetch (#15)

* feat: fetch with abort implementation

* docs: added fetch to docs

* docs: added usage snippet for fetch

* docs: remove comment from fetch snippet

Author: logaretm

README.md

@@ -35,6 +35,7 @@ Each composition function is designed to degrade gracefully so you can safely us
 - [Device Light](https://logaretm.github.io/vue-use-web/guide/device-light.md).
 - [Device Motion](https://logaretm.github.io/vue-use-web/guide/device-motion.md).
 - [Device Orientation](https://logaretm.github.io/vue-use-web/guide/device-orientation.md).
+- [Fetch API](https://logaretm.github.io/vue-use-web/guide/fetch.md).
 - [Full-screen](https://logaretm.github.io/vue-use-web/guide/fullscreen.md).
 - [Geo-location API](https://logaretm.github.io/vue-use-web/guide/geolocation.md).
 - [Local-storage API](https://logaretm.github.io/vue-use-web/guide/local-storage.md)
@@ -47,7 +48,6 @@ Each composition function is designed to degrade gracefully so you can safely us
 - [Window Scroll Position](https://logaretm.github.io/vue-use-web/guide/scroll-position.md).
 - [Window Size](https://logaretm.github.io/vue-use-web/guide/window-size.md).
 - Bluetooth (WIP).
-- Fetch (WIP).
 - Local storage (WIP).
 - Notification (WIP).
 - Share (WIP).

docs/README.md

@@ -42,6 +42,7 @@ npm install @vue/composition-api vue-use-web
 - [Device Light](./guide/device-light.md).
 - [Device Motion](./guide/device-motion.md).
 - [Device Orientation](./guide/device-orientation.md).
+- [Fetch API](./guide/fetch.md).
 - [Full-screen](./guide/fullscreen.md).
 - [Geo-location API](./guide/geolocation.md).
 - [Local-storage API](./guide/local-storage.md)
@@ -54,7 +55,6 @@ npm install @vue/composition-api vue-use-web
 - [Window Scroll Position](./guide/scroll-position.md).
 - [Window Size](./guide/window-size.md).
 - Bluetooth <Badge text="WIP" type="warn" />.
-- Fetch <Badge text="WIP" type="warn" />.
 - Local storage <Badge text="WIP" type="warn" />.
 - Notification <Badge text="WIP" type="warn" />.
 - Share <Badge text="WIP" type="warn" />.

docs/guide/README.md

@@ -26,6 +26,7 @@ These are the currently implemented Web APIs and the planned ones.
 - [Device Light](./device-light.md).
 - [Device Motion](./device-motion.md).
 - [Device Orientation](./device-orientation.md).
+- [Fetch API](./fetch.md).
 - [Full-screen](./fullscreen.md).
 - [Geo-location API](./geolocation.md).
 - [Intersection Observer](./intersection-observer.md).
@@ -38,7 +39,6 @@ These are the currently implemented Web APIs and the planned ones.
 - [Window Scroll Position](./scroll-position.md).
 - [Window Size](./window-size.md).
 - Bluetooth <Badge text="WIP" type="warn" />.
-- Fetch <Badge text="WIP" type="warn" />.
 - Local storage <Badge text="WIP" type="warn" />.
 - Notification <Badge text="WIP" type="warn" />.
 - Share <Badge text="WIP" type="warn" />.

docs/guide/fetch.md

@@ -0,0 +1,74 @@
+# Fetch
+
+> The [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch).
+
+## State
+
+The `useFetch` function exposes the following reactive state:
+
+```js
+import { useFetch } from 'vue-use-web';
+
+const { isLoading, json, text, error, success } = useFetch('http://myurl.com');
+```
+
+| State     | Type      | Description                                                    |
+| --------- | --------- | -------------------------------------------------------------- |
+| isLoading | `Boolean` | If the request is pending.                                     |
+| error     | `Boolean` | If the request resulted in a non 200 status code.              |
+| success   | `Boolean` | If the request is successful. i.e resulted in 200 status code. |
+| json      | `any`     | The response body as JSON.                                     |
+| text      | `string`  | The raw response body as a string.                             |
+
+## Methods
+
+The `useFetch` function exposes the following methods:
+
+```js
+import { useFetch } from 'vue-use-web';
+
+const { cancel } = useFetch(elem);
+```
+
+| Signature | Description                                                                                                                         |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `cancel`  | Cancels the fetch request if browser supports `AbortController`, otherwise the request will complete but will not update the state. |
+
+## Example
+
+```vue
+<template>
+  <div>
+    <div>{{ isLoading }}</div>
+    <div>{{ success }}</div>
+    <div>{{ text }}</div>
+    <div>{{ blob }}</div>
+    <div>{{ json }}</div>
+    <div>{{ cancelled }}</div>
+    <button @click="cancel">Cancel Request</button>
+  </div>
+</template>
+
+<script>
+import { useFetch } from "vue-use-web";
+
+export default {
+  setup() {
+    const {
+      isLoading,
+      error,
+      success,
+      cancel,
+      text,
+      blob,
+      json,
+      cancelled
+    } = useFetch("/data.json");
+
+    return { isLoading, error, success, cancel, text, blob, json, cancelled };
+  }
+};
+</script>
+```
+
+TODO: useFetch example

src/Fetch.ts

@@ -1,29 +1,77 @@
 import { reactive, toRefs, onMounted } from '@vue/composition-api';
 
 export function useFetch(url: RequestInfo, options: RequestInit) {
-  const state = reactive({
+  const stateDefs: {
+    blob: Blob | null;
+    json: any;
+    text: string;
+    isLoading: boolean;
+    success: boolean;
+    error: boolean;
+    cancelled: boolean;
+  } = {
     isLoading: false,
     success: false,
     error: false,
-    response: null
-  });
+    cancelled: false,
+    json: null,
+    blob: null,
+    text: ''
+  };
+
+  const state = reactive(stateDefs);
+
+  let signal: AbortSignal | undefined;
+  let controller: AbortController;
+  if (typeof AbortController !== 'undefined') {
+    controller = new AbortController();
+    signal = controller.signal;
+  }
 
-  onMounted(() => {
-    window
-      .fetch(url, options)
+  function execute() {
+    state.isLoading = true;
+
+    return window
+      .fetch(url, { signal, ...options })
       .then(res => {
         state.success = res.ok;
         state.error = !res.ok;
         state.isLoading = false;
 
-        return res.json();
+        return Promise.all([res.clone().text(), res.clone().blob(), res.json()]);
+      })
+      .then(([text, blob, json]) => {
+        // Graceful degradation for cancellation.
+        if (state.cancelled) {
+          return;
+        }
+
+        state.text = text;
+        state.blob = blob;
+        state.json = json;
       })
-      .then(json => {
-        state.response = json;
+      .catch(() => {
+        state.error = true;
+        state.isLoading = false;
       });
-  });
+  }
+
+  onMounted(execute);
+
+  function cancel() {
+    if (state.success) {
+      return;
+    }
+
+    state.cancelled = true;
+    if (controller) {
+      controller.abort();
+    }
+  }
 
   return {
-    ...toRefs(state)
+    ...toRefs(state),
+    cancel,
+    execute
   };
 }