fix: urlsearchparam polyfill make request param missing error

Author: Boelroy

packages/console-utils/xconsole-service/src/interceptors/paramsInterceptor/index.ts

@@ -1,9 +1,7 @@
-import URLSearchParams from '@ungap/url-search-params';
+import qs from 'qs';
 import { IOptions } from '../../types';
 import { ApiType } from '../../const/index';
 
-export { URLSearchParams };
-
 // This is an axios request interceptor
 // By using this interceptor, user can transform normal JavaScript data object
 // into an URLSearchParams instance
@@ -12,25 +10,17 @@ function searchParamsInterceptor(config: IOptions): IOptions {
   const { params, data, apiType } = config;
   if (apiType === ApiType.custom) return config;
 
-  function transform(target: any = {}): URLSearchParams {
-    const searchParams = new URLSearchParams();
-    // Iterate over request data and append them to searchParams
-    Object.keys(target).forEach((key) => {
-      const value = target[key];
-      if (typeof value !== 'undefined') {
-        searchParams.append(key, value);
-      }
-    });
-    return searchParams;
-  }
-
-  const paramsSearchParams = transform(params);
-  const dataSearchParams = transform(data);
+  const paramsSearchParams = qs.stringify(params);
+  const dataSearchParams = qs.stringify(data);
 
   // Return the new config
   return {
     ...config,
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
     params: paramsSearchParams,
+    //@ts-ignore
     data: dataSearchParams,
     originParams: params,
     originData: data,

packages/console-utils/xconsole-service/src/interceptors/riskInterceptor/handleDoubleConfirm.tsx

@@ -1,11 +1,12 @@
 import axios, { AxiosResponse } from 'axios';
-import { URLSearchParams } from '../paramsInterceptor/index';
+import qs from 'qs';
 import getVerifyInformation from './getVerifyInformation';
 import {
   guideToVerificationMethodSetting,
   guideToVerificationDetailSetting,
 } from './helpers';
 import { IResponse, IResponseData, Risk } from '../../types';
+import paramsInterceptor from '../paramsInterceptor/index'
 
 export interface IVerifyOptions {
   isVerifyCodeValid: boolean;
@@ -17,6 +18,7 @@ export interface IVerifyOptions {
 }
 
 const axiosInstance = axios.create();
+axiosInstance.interceptors.request.use(paramsInterceptor)
 
 function isVerifyCodeValid(
   res: AxiosResponse | null,
@@ -75,10 +77,10 @@ async function handleDoubleConfirm(
       const {
         config: { data: reqDataString, url: reqUrl },
       } = response;
-      const reqData = new URLSearchParams(reqDataString);
-      reqData.append('verifyType', verifyType);
-      if (verifyCode) reqData.append('verifyCode', verifyCode);
-      if (requestId) reqData.append('requestId', requestId);
+      const reqData = qs.parse(reqDataString)
+      reqData['verifyType'] = verifyType;
+      if (verifyCode) reqData['verifyCode'] = verifyCode;
+      if (requestId) reqData['requestId'] = requestId;
 
       newResponse = await axiosInstance({
         method: 'post',

packages/console-utils/xconsole-service/stories/index.stories.tsx

@@ -11,11 +11,12 @@ import '@alicloud/console-components/dist/wind.css'
 defaultAxiosRequest.interceptors.request.handlers.unshift({
   fulfilled: (config) => {
     config.baseURL = 'https://oneapi.alibaba-inc.com/mock/oneconsole';
-    config.method = 'GET'
+    // config.method = 'GET'
     if(config.url.indexOf('multiApi.json')) {
       config.url = config.url.replace(/multiApi.json/, 'api.json')
       config.url = config.url.replace(/action=undefined/, 'action=DescribeMultiApi')
     }
+
     return config;
   }
 });
@@ -26,7 +27,7 @@ storiesOf('XConsole Service', module)
   // .addDecorator(withAxiosDecorator(defaultAxiosRequest))
   .add('AppCode', () => {
     const action = select('action', ['DescribeInstance', 'DescribeAPI'], 'DescribeInstance')
-    const { data, error } = useOpenApi('consoledemo', action, null, { throwDoubleConfirmError: true })
+    const { data, error } = useOpenApi('consoledemo', action, {'xxxx': 'xxxx2'}, { throwDoubleConfirmError: true })
     // @ts-ignore
     console.log(error?.response)
     return <div>{JSON.stringify(data)}{JSON.stringify(error)}</div>