axios => fetch

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "A8N",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "icons": {
       "16": "icons/icon16.png",
       "64": "icons/icon32.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "a8n-extension",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "serve": "vite preview",
@@ -24,7 +24,6 @@
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.4",
     "@webcomponents/custom-elements": "^1.6.0",
-    "axios": "^1.5.0",
     "npm-build-zip": "^1.0.3",
     "puppeteer-core": "^13.0.0",
     "react": "^18.2.0",

src/App.tsx

@@ -9,7 +9,7 @@ import { CrxMessage } from './ts/interface/CrxInterface';
 import { setIsPlaying } from './ts/reducers/process';
 import { setSnackbarMessage } from './ts/reducers/dialog';
 import { useCookies } from 'react-cookie';
-import { getUser } from './ts/api/Axios';
+import { fetchUser } from './ts/api/Fetch';
 import { CircularProgress } from '@mui/material';
 import Loading from './components/Loading';
 
@@ -37,7 +37,7 @@ export default () => {
                 setCookie('SantaRosalia', result.SantaRosalia, {
                     httpOnly : true
                 });
-                getUser().then(user => {
+                fetchUser().then(user => {
                     dispatch(setUser(user));
                     dispatch(setIsSignIn(true));
                     setIsLoading(false);

src/ServiceWorker.ts

@@ -26,7 +26,7 @@ import { CrxInfo } from "@CrxClass/CrxInfo";
 import { CrxBrowserOpenEvent } from "@CrxClass/CrxBrowserOpenEvent";
 import { test } from "./ts/api/CrxPuppeteerTest";
 import { Executor } from "./ts/class/Executor";
-import { getAccessToken } from "./ts/api/Axios";
+import { fetchProcess, putProcess } from "./ts/api/Fetch";
 
 const crxInfo = new CrxInfo();
 console.log('%c ______'+'%c       ___'+'%c     _______'+'%c    ________  ','color:red','color:orange','color:yellow','color:green')
@@ -87,22 +87,12 @@ export const onMessage = async (message : CrxMessage, sender : chrome.runtime.Me
             const { CRX_RECORDS } = await getItemFromLocalStorage([CRX_STATE.CRX_RECORDS]);
             const { user } = await chrome.storage.local.get('user');
 
-            const result = await fetch(import.meta.env.VITE_HOME + 'api/process', {
-                method : 'PUT',
-                body : JSON.stringify({
-                    name : message.payload.name,
-                    data : JSON.stringify(CRX_RECORDS),
-                    userId : user.id
-                })
+            const result = await putProcess(JSON.stringify({
+                name : message.payload.name,
+                data : JSON.stringify(CRX_RECORDS),
+                userId : user.id
+            }));
 
-
-            });
-
-            if (result.ok) {
-
-            } else {
-
-            }
             await closeWindow(crxInfo.RECORDING_TARGET_WINDOW_ID);
             break;
         }
@@ -111,21 +101,12 @@ export const onMessage = async (message : CrxMessage, sender : chrome.runtime.Me
             break;
         }
         case CRX_COMMAND.CMD_START_PROCESS : {
-            const { user } = await chrome.storage.local.get('user');
-            const result = await fetch(import.meta.env.VITE_HOME + 'api/process', {
-                method : 'POST',
-                body : JSON.stringify({
-                    id : message.payload.id,
-                    userId : user.id
-                })
-
-            })
-            if (result.ok) {
-                const body = await result.json();
-                const data = JSON.parse(body.data);
-                new Executor(data);
+            const processId = message.payload.id
+            const result = await fetchProcess(processId);
+            if (result) {
+                new Executor(JSON.parse(result.data));
             } else {
-                sendMessageToView(CRX_COMMAND.CMD_SET_SNACKBAR_MESSAGE, {message : '토큰 만료'});
+                sendMessageToView(CRX_COMMAND.CMD_SET_SNACKBAR_MESSAGE, {message : '실행 오류'});
             }
         }
 

src/components/ProcessSelect.tsx

@@ -1,22 +1,19 @@
 import { getProcessId, getProcesses, setProcessId, setProcesses } from "@/ts/reducers/process"
 import { Divider, List, ListItem, ListItemButton, MenuItem, Select } from "@mui/material"
 import { useEffect, useState } from "react"
-import { axios } from "@/ts/api/Axios"
 import { useAppDispatch, useAppSelector } from "@/ts/hooks"
-import { getUser } from "@/ts/reducers/user"
 import ProcessItemButton from "./ProcessItemButton"
+import { fetchProcesses } from "@/ts/api/Fetch"
 export default () => {
     const dispatch = useAppDispatch();
-    const processId = useAppSelector(getProcessId);
     const processes = useAppSelector(getProcesses);
-    const user = useAppSelector(getUser);
 
     const setId = (id: string) => {
         dispatch(setProcessId(id));
     }
     useEffect(() => {
-        axios.get(`/api/process`).then(result => {
-            dispatch(setProcesses(result.data));
+        fetchProcesses().then(result => {
+            dispatch(setProcesses(result));
         });
     }, []);
     const processMenuItems = processes.map((v, i) =>{

src/ts/api/Fetch.ts

@@ -0,0 +1,61 @@
+import { FetchURL, Method } from '@CrxInterface';
+
+class FetchLM {
+    baseURL: string
+    constructor () {
+        this.baseURL = import.meta.env.VITE_HOME;
+    }
+    async get (URL: FetchURL, parameter?: string) {
+        parameter = parameter ? `/${parameter}` : '';
+        const response = await fetch(this.baseURL + URL + parameter, {
+            method : Method.GET,
+        });
+        if (!response.ok) throw response;
+        return await response.json();
+    }
+    async post (URL: FetchURL, body?: string) {
+        const response = await fetch(this.baseURL + URL, {
+            method : Method.POST,
+            body : body
+        });
+        if (!response.ok) throw response;
+        return await response.json();
+    }
+    async put (URL: FetchURL, body?: string) {
+        const response = await fetch(this.baseURL + URL, {
+            method : Method.PUT,
+            body : body
+        });
+        if (!response.ok) throw response;
+        return await response.json();
+    }
+    async delete (URL: FetchURL) {
+        const response = await fetch(this.baseURL + URL, {
+            method : Method.DELETE,
+        });
+        if (!response.ok) throw response;
+        return await response.json();
+    }
+}
+
+export const fetchLM = new FetchLM();
+
+export const fetchUser = async () => {
+    const res = await fetchLM.get(FetchURL.user);
+    return res;
+}
+
+export const fetchProcesses = async () => {
+    const result = await fetchLM.get(FetchURL.process);
+    return result;
+}
+
+export const fetchProcess = async (processId: string) => {
+    const result = await fetchLM.get(FetchURL.process, processId);
+    return result;
+}
+
+export const putProcess = async (body: string) => {
+    const result = await fetchLM.put(FetchURL.process, body);
+    return result;
+}

src/ts/interface/CrxInterface.ts

@@ -224,4 +224,17 @@ export interface ExecuteActionParameter {
     alertOption? : AlertOption
     dataScrapingOptionString? : string
     script?: string
+}
+
+export enum Method {
+    GET = 'GET',
+    POST = 'POST',
+    PUT = 'PUT',
+    DELETE = 'DELETE'
+}
+
+export enum FetchURL {
+    user = 'api/user',
+    process = 'api/process'
+
 }