feat(projects): @sa/axios: createRequest, createFlatRequest, createHookRequest

src/service/request/index.ts

@@ -1,4 +1,4 @@
-import { createOfetch as createRequest } from '@sa/request';
+import { BACKEND_ERROR_CODE, createFlatRequest, createRequest } from '@sa/axios';
 import { localStg } from '@/utils/storage';
 import { createProxyPattern, createServiceConfig } from '~/env.config';
 
@@ -6,20 +6,89 @@ const { baseURL, otherBaseURL } = createServiceConfig(import.meta.env);
 
 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y';
 
-export const request = createRequest({
-  baseURL: isHttpProxy ? createProxyPattern() : baseURL,
-  headers: {
-    apifoxToken: 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2'
+export const request = createFlatRequest<App.Service.Response>(
+  {
+    baseURL: isHttpProxy ? createProxyPattern() : baseURL,
+    headers: {
+      apifoxToken: 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2'
+    }
   },
-  onRequest({ options }) {
-    if (options.headers) {
+  {
+    async onRequest(config) {
+      const { headers } = config;
+
+      // set token
       const token = localStg.get('token');
+      const Authorization = token ? `Bearer ${token}` : null;
+      Object.assign(headers, { Authorization });
 
-      const Authorization = token ? `Bearer ${token}` : '';
+      return config;
+    },
+    isBackendSuccess(response) {
+      // when the backend response code is "0000", it means the request is success
+      // you can change this logic by yourself
+      return response.data.code === '0000';
+    },
+    async onBackendFail(_response) {
+      // when the backend response code is not 200, it means the request is fail
+      // for example: the token is expired, refetch token and retry request
+    },
+    transformBackendResponse(response) {
+      return response.data.data;
+    },
+    onError(error) {
+      // when the request is fail, you can show error message
 
-      Object.assign(options.headers, { Authorization });
+      let message = error.message;
+
+      // show backend error message
+      if (error.code === BACKEND_ERROR_CODE) {
+        message = error.request?.data.msg || message;
+      }
+
+      window.$message?.error(message);
     }
   }
-});
+);
 
-export const demoRequest = createRequest({ baseURL: isHttpProxy ? createProxyPattern('demo') : otherBaseURL.demo });
+export const demoRequest = createRequest<App.Service.DemoResponse>(
+  {
+    baseURL: isHttpProxy ? createProxyPattern('demo') : otherBaseURL.demo
+  },
+  {
+    async onRequest(config) {
+      const { headers } = config;
+
+      // set token
+      const token = localStg.get('token');
+      const Authorization = token ? `Bearer ${token}` : null;
+      Object.assign(headers, { Authorization });
+
+      return config;
+    },
+    isBackendSuccess(response) {
+      // when the backend response code is 200, it means the request is success
+      // you can change this logic by yourself
+      return response.data.status === '200';
+    },
+    async onBackendFail(_response) {
+      // when the backend response code is not 200, it means the request is fail
+      // for example: the token is expired, refetch token and retry request
+    },
+    transformBackendResponse(response) {
+      return response.data.result;
+    },
+    onError(error) {
+      // when the request is fail, you can show error message
+
+      let message = error.message;
+
+      // show backend error message
+      if (error.code === BACKEND_ERROR_CODE) {
+        message = error.request?.data.message || message;
+      }
+
+      window.$message?.error(message);
+    }
+  }
+);