feat(projects): update @sa/axios

packages/axios/package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@sa/utils": "workspace:*",
     "axios": "1.6.3",
-    "axios-retry": "^4.0.0",
-    "form-data": "^4.0.0"
+    "axios-retry": "^4.0.0"
   }
 }

packages/axios/src/index.ts

@@ -2,20 +2,20 @@ import axios from 'axios';
 import type { CancelTokenSource, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
 import axiosRetry from 'axios-retry';
 import { nanoid } from '@sa/utils';
-import { createDefaultOptions, createRetryOptions } from './options';
-import { getContentType, transformRequestData } from './shared';
+import { createAxiosConfig, createDefaultOptions, createRetryOptions } from './options';
 import { REQUEST_ID_KEY } from './constant';
 import type { RequestInstance, RequestOption } from './type';
 
 export function createRequest(axiosConfig?: CreateAxiosDefaults, options?: Partial<RequestOption>) {
   const opts = createDefaultOptions(options);
 
-  const instance = axios.create(axiosConfig);
+  const axiosConf = createAxiosConfig(axiosConfig);
+  const instance = axios.create(axiosConf);
 
   const cancelTokenSourceMap = new Map<string, CancelTokenSource>();
 
   // config axios retry
-  const retryOptions = createRetryOptions(axiosConfig);
+  const retryOptions = createRetryOptions(axiosConf);
   axiosRetry(instance, retryOptions);
 
   instance.interceptors.request.use(conf => {
@@ -30,10 +30,6 @@ export function createRequest(axiosConfig?: CreateAxiosDefaults, options?: Parti
     config.cancelToken = cancelTokenSource.token;
     cancelTokenSourceMap.set(requestId, cancelTokenSource);
 
-    // transform data
-    const contentType = getContentType(config);
-    config.data = transformRequestData(config.data, contentType);
-
     // handle config by hook
     const handledConfig = opts.onRequest?.(config) || config;
 
@@ -42,11 +38,20 @@ export function createRequest(axiosConfig?: CreateAxiosDefaults, options?: Parti
 
   instance.interceptors.response.use(
     async response => {
-      console.log('response: ', response);
-      return response;
+      const backendSuccess = opts.onBackendSuccess(response);
+
+      if (backendSuccess) {
+        return Promise.resolve(response);
+      }
+
+      const fail = await opts.onBackendFail(response, instance);
+      if (fail) {
+        return fail;
+      }
+
+      return Promise.reject(response);
     },
     error => {
-      console.log('response error: ', error);
       return Promise.reject(error);
     }
   );

packages/axios/src/options.ts

@@ -1,5 +1,6 @@
 import type { CreateAxiosDefaults } from 'axios';
 import type { IAxiosRetryConfig } from 'axios-retry';
+import { isHttpSuccess } from './shared';
 import type { RequestOption } from './type';
 
 export function createDefaultOptions(options?: Partial<RequestOption>) {
@@ -24,3 +25,19 @@ export function createRetryOptions(config?: Partial<CreateAxiosDefaults>) {
 
   return retryConfig;
 }
+
+export function createAxiosConfig(config?: Partial<CreateAxiosDefaults>) {
+  const TEN_SECONDS = 10 * 1000;
+
+  const axiosConfig: CreateAxiosDefaults = {
+    timeout: TEN_SECONDS,
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    validateStatus: isHttpSuccess
+  };
+
+  Object.assign(axiosConfig, config);
+
+  return axiosConfig;
+}

packages/axios/src/shared.ts

@@ -1,53 +1,28 @@
-import FormData from 'form-data';
-import type { AxiosHeaderValue, InternalAxiosRequestConfig } from 'axios';
-import type { ContentType } from './type';
+import type { AxiosHeaderValue, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 
-export function transformRequestData(data: any, contentType: AxiosHeaderValue) {
-  if (typeof contentType !== 'string') return data;
-
-  const $contentType = contentType as ContentType;
-
-  // 1. "application/json": do not transform
-
-  // 2 "application/x-www-form-urlencoded": transform to query string
-  if ($contentType === 'application/x-www-form-urlencoded' && typeof data === 'object') {
-    const params = new URLSearchParams();
-    Object.keys(data).forEach(key => {
-      params.append(key, data[key]);
-    });
-
-    return params;
-  }
-
-  // 3. "multipart/form-data": transform to FormData
-  if ($contentType === 'multipart/form-data' && typeof data === 'object') {
-    const formData = new FormData();
-    const entries = Object.entries(data);
-
-    entries.forEach(([key, value]) => {
-      if (isFiles(value)) {
-        value.forEach(file => {
-          formData.append(key, file);
-        });
-      } else {
-        formData.append(key, value);
-      }
-    });
-  }
+export function getContentType(config: InternalAxiosRequestConfig) {
+  const contentType: AxiosHeaderValue = config.headers?.['Content-Type'] || 'application/json';
 
-  return data;
+  return contentType;
 }
 
-function isFiles(data: File[] | unknown): data is File[] {
-  const isArray = Array.isArray(data);
-  const hasData = isArray && data.length > 0;
-  const isFile = hasData && Object.prototype.toString.call(data[0]) === '[object File]';
-
-  return isFile;
+/**
+ * check if http status is success
+ *
+ * @param status
+ */
+export function isHttpSuccess(status: number) {
+  const isSuccessCode = status >= 200 && status < 300;
+  return isSuccessCode || status === 304;
 }
 
-export function getContentType(config: InternalAxiosRequestConfig) {
-  const contentType: AxiosHeaderValue = config.headers?.['Content-Type'] || 'application/json';
+/**
+ * is response json
+ *
+ * @param response axios response
+ */
+export function isResponseJson(response: AxiosResponse) {
+  const { responseType } = response.config;
 
-  return contentType;
+  return responseType === 'json' || responseType === undefined;
 }

src/service/api/auth.ts

@@ -45,10 +45,6 @@ export function fetchDebug() {
 
 export function fetchDebugAxios() {
   return axios<App.Service.Response<string>>('/debug-post', {
-    method: 'post',
-    headers: { 'content-type': 'application/x-www-form-urlencoded' },
-    data: {
-      a: 1
-    }
+    method: 'post'
   });
 }

src/service/request/index.ts

@@ -13,7 +13,6 @@ export const request = createRequest({
     apifoxToken: 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2'
   },
   onRequest(context) {
-    console.log('context: ', context);
     const { headers } = context.options;
 
     if (headers) {
@@ -23,16 +22,16 @@ export const request = createRequest({
 
       Object.assign(headers, { Authorization });
     }
-  },
-  onRequestError(context) {
-    console.error('onRequestError', context);
-  },
-  onResponse(context) {
-    console.log('onResponse', context);
-  },
-  onResponseError(context) {
-    console.log('onResponseError', context);
   }
+  // onRequestError(context) {
+  //   console.error('onRequestError', context);
+  // },
+  // onResponse(context) {
+  //   console.log('onResponse', context);
+  // },
+  // onResponseError(context) {
+  //   console.log('onResponseError', context);
+  // }
 });
 
 export const demoRequest = createRequest({ baseURL: isHttpProxy ? createProxyPattern('demo') : otherBaseURL.demo });

src/views/home/index.vue

@@ -7,8 +7,12 @@ async function start() {
 }
 
 async function startAxios() {
-  const data = await fetchDebugAxios();
-  console.log('data: ', data);
+  try {
+    const data = await fetchDebugAxios();
+    console.log('data: ', data);
+  } catch (error) {
+    console.log('error: ', error);
+  }
 }
 
 start();