feat: added additional fetch response properties (#18)

* feat: added more properties to the useFetch composable

* docs: added new properties to the fetch docs

Author: logaretm

docs/guide/fetch.md

@@ -12,13 +12,17 @@ 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.                             |
+| State      | Type                     | Description                                                                      |
+| ---------- | ------------------------ | -------------------------------------------------------------------------------- |
+| error      | `Boolean`                | If the request resulted in a non 200 status code.                                |
+| headers    | `Record<string, string>` | The response headers.                                                            |
+| isLoading  | `Boolean`                | If the request is pending.                                                       |
+| json       | `any`                    | The response body as JSON.                                                       |
+| status     | `number`                 | The HTTP status code.                                                            |
+| statusText | `number`                 | The HTTP status text, eg: "OK" for 200.                                          |
+| success    | `Boolean`                | If the request is successful. i.e resulted in 200 status code.                   |
+| text       | `string`                 | The raw response body as a string.                                               |
+| type       | `string`                 | [Response type](https://developer.mozilla.org/en-US/docs/Web/API/Response/type). |
 
 ## Methods
 
@@ -50,20 +54,11 @@ const { cancel } = useFetch(elem);
 </template>
 
 <script>
-import { useFetch } from "vue-use-web";
+import { useFetch } from 'vue-use-web';
 
 export default {
   setup() {
-    const {
-      isLoading,
-      error,
-      success,
-      cancel,
-      text,
-      blob,
-      json,
-      cancelled
-    } = useFetch("/data.json");
+    const { isLoading, error, success, cancel, text, blob, json, cancelled } = useFetch('/data.json');
 
     return { isLoading, error, success, cancel, text, blob, json, cancelled };
   }

src/Fetch.ts

@@ -5,8 +5,12 @@ export function useFetch(url: RequestInfo, options: RequestInit) {
     blob: Blob | null;
     json: any;
     text: string;
+    statusText: string;
+    status: number | undefined;
     isLoading: boolean;
+    headers: Record<string, string>;
     success: boolean;
+    type: ResponseType | 'unknown';
     error: boolean;
     cancelled: boolean;
   } = {
@@ -16,7 +20,11 @@ export function useFetch(url: RequestInfo, options: RequestInit) {
     cancelled: false,
     json: null,
     blob: null,
-    text: ''
+    text: '',
+    type: 'unknown',
+    status: undefined,
+    statusText: '',
+    headers: {}
   };
 
   const state = reactive(stateDefs);
@@ -37,6 +45,15 @@ export function useFetch(url: RequestInfo, options: RequestInit) {
         state.success = res.ok;
         state.error = !res.ok;
         state.isLoading = false;
+        state.statusText = res.statusText;
+        state.status = res.status;
+        state.type = res.type;
+        const headers: Record<string, string> = {};
+        res.headers.forEach((value, key) => {
+          headers[key] = value;
+        });
+
+        state.headers = headers;
 
         return Promise.all([res.clone().text(), res.clone().blob(), res.json()]);
       })