ft: Add Fetch API

README.md

@@ -90,6 +90,7 @@ So far, it includes the following examples:
 1. 🌐 URL API
 1. 🗒️ Selection API
 1. 📃 Page Visibility API
+1. 〽️ Fetch API
 
 # 🤝 Open Source
 

src/modules/apis/data.ts

@@ -438,5 +438,24 @@ export const data: Array<Demo> = [
         'https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API',
       canIUseURL: 'https://caniuse.com/mdn-api_eyedropper',
     },
+  },
+  {
+    id: 'fetch-api',
+    emoji: '〽️',
+    title: 'Fetch API',
+    description:
+      'The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. Used JSONPlaceholder a free online REST API that you can use whenever you need some fake data for testing and prototyping.',
+    meta: {
+      author: {
+        name: 'Shyaka Tresor',
+        social: {
+          email: '[email protected]',
+          github: 'shyakadev',
+          twitter: 'tshyaka',
+        },
+      },
+      apiDocURL: 'https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API',
+      canIUseURL: 'https://caniuse.com/fetch',
+    },
   }, //replace item here
 ];

src/modules/apis/fetch-api/index.ts

@@ -0,0 +1,62 @@
+export const hasSupport = (): boolean =>
+  Boolean('connection' in window.navigator);
+
+async function get(url: string) {
+  const requestOptions = {
+    method: 'GET',
+  };
+  const response = await fetch(url, requestOptions);
+  return handleResponse(response);
+}
+
+async function post(url: string, body: any) {
+  // eslint-disable-next-line no-useless-catch
+  try {
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+      body,
+    };
+
+    const response = await fetch(url, requestOptions);
+    return response.json();
+  } catch (error) {
+    throw error;
+  }
+}
+
+async function put(url: string, body: any) {
+  const requestOptions = {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: body,
+  };
+
+  const response = await fetch(url, requestOptions);
+  return response.json();
+}
+
+// prefixed with underscore because delete is a reserved word in javascript
+async function _delete(url: string) {
+  const requestOptions = {
+    method: 'DELETE',
+  };
+  const response = await fetch(url, requestOptions);
+  return response.json();
+}
+const run = {
+  get,
+  post,
+  put,
+  _delete,
+};
+
+function handleResponse(response: any) {
+  try {
+    return response.json();
+  } catch (error: any) {
+    error.message;
+  }
+}
+
+export default run;