@conecli/cone-render 0.10.1-shop3.4 → 0.10.1-shop3.6

package/dist/service/http/h5Http.ts

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  isSupportHybridHttpRequest,
  draInterfaceCustomReport,
  draBusinessCustomReport,
  jsonHeader = 'application/json;charset=utf-8',
  formDataHeader = 'application/x-www-form-urlencoded',
  HYBRID: 'httpRequest_hybrid',
  TARO: 'httpRequest_taro',
  #requestTimeStamp: number
  #responseTimeStamp: number
  #getResTimeStamp: number
  #reportType: string
  #callbackFunction: string
  
  async request({
    url,
    method = 'POST',
    timeout = 7000,
    isColorVerify = false,
    ...otherOptions
  }): Promise<Taro.request.SuccessCallbackResult<any>> {
    const { header: otherHeader, ...otherOpts } = otherOptions
    const header = {
      'content-type':
        method === 'POST'
          ? RequestHeaderContentType.formDataHeader
          : RequestHeaderContentType.jsonHeader,
      ...otherHeader,
    }
    let getRequestUrl = url
    let requestTask
    const data = otherOpts?.data
    const isGatewayRequest =
      url === this.api.apiFunc && typeof data === 'object'
    if (isGatewayRequest) {
      getRequestUrl = this._handleSpecialGatewayUrl(url)
      const shouldUseHybridRequest = this._shouldUseHybridRequest(data)
      if (shouldUseHybridRequest) {
        requestTask = this._hybridRequest(getRequestUrl, data)
      } else {
        otherOpts.data = await this._prepareGatewayReqData(data, isColorVerify)
        requestTask = this._taroRequest(
          getRequestUrl,
          otherOpts,
          method,
          timeout,
          header,
        )
      }
    } else {
      requestTask = this._taroRequest(
        getRequestUrl,
        otherOpts,
        method,
        timeout,
        header,
      )
    }
    const requestTimeoutPromise =
      new Promise<ServiceInterFace.RequestPromiseRes>((resolve) => {
        setTimeout(() => {
          resolve({
            statusCode: 500,
            resTimeoutState: true,
            errMsg: 'request timeout',
          })
        }, timeout)
      })
    return Promise.race([requestTask, requestTimeoutPromise]).then(
      (res: any) => {
        if (res && res.statusCode === 500 && res.resTimeoutState) {
          if (this.#reportType === HTTP_REQUEST_TYPE.HYBRID) {
            this._clearFunction(this.#callbackFunction)
          } else {
            requestTask.abort && requestTask.abort()
          }
        }
        this._handleReportInterfaceError(url, data, timeout, res)
        return res
      },
    )
  }
  
  _handleSpecialGatewayUrl(url: string): string {
    if (isPc && window.location.hostname.includes('.jd.hk')) {
      return this.api.hkApiFunc
    }
    if (
      isJdApp &&
      window?.shopGlobalSwitch?.dualProtocol &&
      !window.location.href.includes('jshopx_vconsole')
    ) {
      return window?.shopGlobalSwitch?.dualProtocol?.apiTestApp || url
    }
    return url
  }
  
  _shouldUseHybridRequest(data: any): boolean {
    try {
      const isWhxFunctionId = /^whx\_/.test(data?.functionId)
      const isGlobalOpenHybirdHttpRequest =
        window?.shopGlobalSwitch?.openHybirdHttpRequest === 'true'
      if (
        !isJdApp ||
        !isSupportHybridHttpRequest ||
        !isGlobalOpenHybirdHttpRequest ||
        isWhxFunctionId ||
        isJdAndHarmonyDevice
      ) {
        return false
      }
      const configData = global.getDynamicConfig('hybridHttpSwitch')
      const { globalOn = false, grayscale = {} } = configData || {}
      const buildType = process.env.BUILD_TYPE || ''
      const isInvokeGray = globalOn || grayscale[buildType]
      console.log(
        '使用hybrid请求是否命中灰度，isInvokeGray:',
        isInvokeGray,
        '获取mpaas配置hybridHttpSwitch原始数据configData',
        configData,
      )
      const hasWindowXWebView = !!window.XWebView
      return isInvokeGray && hasWindowXWebView
    } catch (e) {
      console.log('获取是否使用Hybrid请求出错，e:', e)
      return false
    }
  }
  
  _hybridRequest(url: string, data: any): Promise<any> {
    return new Promise((resolve, reject) => {
      try {
        const changeCurrentUrl = url.startsWith('//') ? `https:${url}` : url
        const { functionId, body, ...otherH5Param } = data
        const reqParams = {
          url: isIosDevice ? `${changeCurrentUrl}/` : changeCurrentUrl, 
          functionId: functionId,
          body: body,
          headerType: '0', 
          param: {
            ...otherH5Param,
          },
          header: {
            Referer: window.location.origin, 
          },
        }
        const callbackFunction = this._generateCallbackFunction()
        this.#callbackFunction = callbackFunction
        this.#requestTimeStamp = Date.now()
        this.#reportType = HTTP_REQUEST_TYPE.HYBRID
        window.XWebView.callNative(
          'ColorQueryPlugin',
          'colorRequest',
          JSON.stringify(reqParams),
          callbackFunction,
          '1', 
        ) 
        window[callbackFunction] = (result) => {
          this.#responseTimeStamp = Date.now()
          try {
            const resultObj =
              typeof result === 'string' ? JSON.parse(result) : result
            resolve(resultObj)
          } catch (error) {
            const errMsg = 'hybrid网络请求JSON解析失败, error: ' + error
            draBusinessCustomReport({
              type: `${HTTP_REQUEST_TYPE.HYBRID}_jsonParseError`,
              errMsg,
              result,
            })
            reject({ errMsg })
          }
          this._clearFunction(callbackFunction)
        }
      } catch (error) {
        reject({
          errMsg:
            'hybrid网络请求，App下调用window.XWebView.callNative出错, error: ' +
            error,
        })
      }
    })
  }
  
  _generateCallbackFunction() {
    return `hybridHttpRequestCallback_${Date.now()}_${Math.ceil(
      Math.random() * 100000,
    )}`
  }
  
  _clearFunction(functionName: string) {
    try {
      delete window[functionName]
    } catch (e) {
      window[functionName] = undefined
    }
  }
  
  async _prepareGatewayReqData(
    data: any,
    isColorVerify: boolean,
  ): Promise<any> {
    const { functionId } = data
    console.log('获取当前是否需要color加固', isColorVerify, functionId)
    if (isColorVerify) {
      const { h5st } = await colorSign.paramsSign(data)
      h5st && (data.h5st = encodeURI(h5st))
      console.log(`${functionId}的apiReq_h5st===>：${h5st}`)
    }
    const { jsToken } = await colorSign.getFmInfo()
    console.log(`${functionId}的api jsToken指纹===>：${jsToken}`)
    jsToken && (data['x-api-eid-token'] = jsToken)
    return data
  }
  
  _taroRequest(
    url: string,
    otherOpts: any,
    method: string,
    timeout: number,
    header: string,
  ): Promise<any> {
    const reqParam = {
      url,
      method,
      timeout,
      header,
      credentials: 'include',
      ...otherOpts,
    }
    this.#requestTimeStamp = Date.now()
    this.#reportType = HTTP_REQUEST_TYPE.TARO
    return Taro.request(reqParam)
  }
  
  _reportRequestTime(url: string, data: any): void {
    this.#getResTimeStamp = Date.now()
    if (this.#reportType === HTTP_REQUEST_TYPE.TARO) {
      this.#responseTimeStamp = this.#getResTimeStamp
    }
    draInterfaceCustomReport(
      {
        type: `${this.#reportType}_consumeTime`, 
        url,
        functionId: data?.functionId,
        requestTimeStamp: this.#requestTimeStamp,
        responseTimeStamp: this.#responseTimeStamp,
        errMsg: `使用${this.#reportType}调用接口请求响应耗时`,
        source: 'remote', 
      },
      {
        consumeTime: `${this.#responseTimeStamp - this.#requestTimeStamp}ms`,
        getResTime: `${this.#getResTimeStamp - this.#requestTimeStamp}ms`,
      },
    )
  }
  
  _handleReportInterfaceError(
    url: string,
    reqData: any,
    timeOut: any,
    res: any,
  ): void {
    const source = 'remote' 
    const requestType = this.#reportType 
    let errorType = ''
    let subMsg = ''
    let reportFlag = false
    if (res) {
      const { statusCode, data, status, resTimeoutState } = res
      if (statusCode === 500 && resTimeoutState) {
        reportFlag = true
        errorType = 'timeout'
        subMsg = `接口请求超时${timeOut}ms`
      } else if ((statusCode === 200 || status === '0') && data) {
        const resCode = Object.prototype.hasOwnProperty.call(data, 'code')
          ? Number(data.code)
          : -1
        const subCode = Object.prototype.hasOwnProperty.call(data, 'subCode')
          ? Number(data.subCode)
          : -1
        const isSuccess =
          data.success === true ||
          data.isSuccess ||
          resCode === 0 ||
          resCode === 200 ||
          subCode === 0
        if (!isSuccess && resCode !== 3) {
          reportFlag = true
          errorType = 'dataError'
          subMsg = '接口请求返回数据异常'
        }
      } else {
        reportFlag = true
        errorType = 'statusError'
        subMsg = '接口请求错误，h5请求statusCode非200，或hybrid请求status非0，或未返回data字段'
      }
    }
    reportFlag &&
      draInterfaceCustomReport({
        subMsg,
        url,
        source,
        requestType,
        errorType,
        functionId: reqData?.functionId,
        appid: reqData?.appId,
        client: reqData?.client,
        clientVersion: reqData?.clientVersion,
        statusCode: res?.statusCode,
        status: res?.status,
        code: res?.data?.code || res?.data?.subCode, 
        errMsg: res?.errMsg || res?.msg || res?.message || res?.data?.echo, 
        originReqDataStr: JSON.stringify(reqData), 
        originResDataStr: JSON.stringify(res), 
      })
  }
+import Taro from '@tarojs/taro';
  isSupportHybridHttpRequest,
  draInterfaceCustomReport,
  draBusinessCustomReport,
  jsonHeader = 'application/json;charset=utf-8',
  formDataHeader = 'application/x-www-form-urlencoded',
  HYBRID: 'httpRequest_hybrid',
  TARO: 'httpRequest_taro',
  #requestTimeStamp: number;
  #responseTimeStamp: number;
  #getResTimeStamp: number;
  #reportType: string;
  #callbackFunction: string;
  
  async request({
    url,
    method = 'POST',
    timeout = 7000,
    isColorVerify = false,
    ...otherOptions
  }): Promise<Taro.request.SuccessCallbackResult<any>> {
    const { header: otherHeader, ...otherOpts } = otherOptions;
    const header = {
      'content-type':
        method === 'POST'
          ? RequestHeaderContentType.formDataHeader
          : RequestHeaderContentType.jsonHeader,
      ...otherHeader,
    };
    let getRequestUrl = url;
    let requestTask;
    const data = otherOpts?.data;
    const isGatewayRequest = url === this.api.apiFunc && typeof data === 'object';
    if (isGatewayRequest) {
      getRequestUrl = this._handleSpecialGatewayUrl(url);
      const shouldUseHybridRequest = this._shouldUseHybridRequest(data);
      if (shouldUseHybridRequest) {
        requestTask = this._hybridRequest(getRequestUrl, data);
      } else {
        otherOpts.data = await this._prepareGatewayReqData(data, isColorVerify);
        requestTask = this._taroRequest(getRequestUrl, otherOpts, method, timeout, header);
      }
    } else {
      requestTask = this._taroRequest(getRequestUrl, otherOpts, method, timeout, header);
    }
    const requestTimeoutPromise = new Promise<ServiceInterFace.RequestPromiseRes>((resolve) => {
      setTimeout(() => {
        resolve({
          statusCode: 500,
          resTimeoutState: true,
          errMsg: 'request timeout',
        });
      }, timeout);
    });
    return Promise.race([requestTask, requestTimeoutPromise]).then((res: any) => {
      if (res && res.statusCode === 500 && res.resTimeoutState) {
        if (this.#reportType === HTTP_REQUEST_TYPE.HYBRID) {
          this._clearFunction(this.#callbackFunction);
        } else {
          requestTask.abort && requestTask.abort();
        }
      }
      this._handleReportInterfaceError(url, data, timeout, res);
      return res;
    });
  }
  
  _handleSpecialGatewayUrl(url: string): string {
    if (isPc && window.location.hostname.includes('.jd.hk')) {
      return this.api.hkApiFunc;
    }
    if (
      isJdApp &&
      window?.shopGlobalSwitch?.dualProtocol &&
      !window.location.href.includes('jshopx_vconsole')
    ) {
      return window?.shopGlobalSwitch?.dualProtocol?.apiTestApp || url;
    }
    return url;
  }
  
  _shouldUseHybridRequest(data: any): boolean {
    try {
      const isWhxFunctionId = /^whx\_/.test(data?.functionId);
      const isGlobalOpenHybirdHttpRequest =
        window?.shopGlobalSwitch?.openHybirdHttpRequest === 'true';
      if (
        !isJdApp ||
        !isSupportHybridHttpRequest ||
        !isGlobalOpenHybirdHttpRequest ||
        isWhxFunctionId ||
        isJdAndHarmonyDevice
      ) {
        return false;
      }
      const configData = global.getDynamicConfig('hybridHttpSwitch');
      const { globalOn = false, grayscale = {} } = configData || {};
      const buildType = process.env.BUILD_TYPE || '';
      const isInvokeGray = globalOn || grayscale[buildType];
      console.log(
        '使用hybrid请求是否命中灰度，isInvokeGray:',
        isInvokeGray,
        '获取mpaas配置hybridHttpSwitch原始数据configData',
        configData,
      );
      const hasWindowXWebView = !!window.XWebView;
      return isInvokeGray && hasWindowXWebView;
    } catch (e) {
      console.log('获取是否使用Hybrid请求出错，e:', e);
      return false;
    }
  }
  
  _hybridRequest(url: string, data: any): Promise<any> {
    return new Promise((resolve, reject) => {
      try {
        const changeCurrentUrl = url.startsWith('//') ? `https:${url}` : url;
        const { functionId, body, ...otherH5Param } = data;
        const reqParams = {
          url: isIosDevice ? `${changeCurrentUrl}/` : changeCurrentUrl, 
          functionId: functionId,
          body: body,
          headerType: '0', 
          param: {
            ...otherH5Param,
          },
          header: {
            Referer: window.location.origin, 
          },
        };
        const callbackFunction = this._generateCallbackFunction();
        this.#callbackFunction = callbackFunction;
        this.#requestTimeStamp = Date.now();
        this.#reportType = HTTP_REQUEST_TYPE.HYBRID;
        window.XWebView.callNative(
          'ColorQueryPlugin',
          'colorRequest',
          JSON.stringify(reqParams),
          callbackFunction,
          '1', 
        ); 
        window[callbackFunction] = (result) => {
          this.#responseTimeStamp = Date.now();
          try {
            const resultObj = typeof result === 'string' ? JSON.parse(result) : result;
            resolve(resultObj);
          } catch (error) {
            const errMsg = 'hybrid网络请求JSON解析失败, error: ' + error;
            draBusinessCustomReport({
              type: `${HTTP_REQUEST_TYPE.HYBRID}_jsonParseError`,
              errMsg,
              result,
            });
            reject({ errMsg });
          }
          this._clearFunction(callbackFunction);
        };
      } catch (error) {
        reject({
          errMsg: 'hybrid网络请求，App下调用window.XWebView.callNative出错, error: ' + error,
        });
      }
    });
  }
  
  _generateCallbackFunction() {
    return `hybridHttpRequestCallback_${Date.now()}_${Math.ceil(Math.random() * 100000)}`;
  }
  
  _clearFunction(functionName: string) {
    try {
      delete window[functionName];
    } catch (e) {
      window[functionName] = undefined;
    }
  }
  
  async _prepareGatewayReqData(data: any, isColorVerify: boolean): Promise<any> {
    const { functionId } = data;
    console.log('获取当前是否需要color加固', isColorVerify, functionId);
    if (isColorVerify) {
      const { h5st } = await colorSign.paramsSign(data);
      h5st && (data.h5st = encodeURI(h5st));
      console.log(`${functionId}的apiReq_h5st===>：${h5st}`);
    }
    const { jsToken } = await colorSign.getFmInfo();
    console.log(`${functionId}的api jsToken指纹===>：${jsToken}`);
    jsToken && (data['x-api-eid-token'] = jsToken);
    return data;
  }
  
  _taroRequest(
    url: string,
    otherOpts: any,
    method: string,
    timeout: number,
    header: string,
  ): Promise<any> {
    const reqParam = {
      url,
      method,
      timeout,
      header,
      credentials: 'include',
      ...otherOpts,
    };
    this.#requestTimeStamp = Date.now();
    this.#reportType = HTTP_REQUEST_TYPE.TARO;
    return Taro.request(reqParam);
  }
  
  _reportRequestTime(url: string, data: any): void {
    this.#getResTimeStamp = Date.now();
    if (this.#reportType === HTTP_REQUEST_TYPE.TARO) {
      this.#responseTimeStamp = this.#getResTimeStamp;
    }
    draInterfaceCustomReport(
      {
        type: `${this.#reportType}_consumeTime`, 
        url,
        functionId: data?.functionId,
        requestTimeStamp: this.#requestTimeStamp,
        responseTimeStamp: this.#responseTimeStamp,
        errMsg: `使用${this.#reportType}调用接口请求响应耗时`,
        source: 'remote', 
      },
      {
        consumeTime: `${this.#responseTimeStamp - this.#requestTimeStamp}ms`,
        getResTime: `${this.#getResTimeStamp - this.#requestTimeStamp}ms`,
      },
    );
  }
  
  _handleReportInterfaceError(url: string, reqData: any, timeOut: any, res: any): void {
    const source = 'remote'; 
    const requestType = this.#reportType; 
    let errorType = '';
    let subMsg = '';
    let reportFlag = false;
    if (res) {
      const { statusCode, data, status, resTimeoutState } = res;
      if (statusCode === 500 && resTimeoutState) {
        reportFlag = true;
        errorType = 'timeout';
        subMsg = `接口请求超时${timeOut}ms`;
      } else if ((statusCode === 200 || status === '0') && data) {
        const resCode = Object.prototype.hasOwnProperty.call(data, 'code') ? Number(data.code) : -1;
        const subCode = Object.prototype.hasOwnProperty.call(data, 'subCode')
          ? Number(data.subCode)
          : -1;
        const isSuccess =
          data.success === true ||
          data.isSuccess ||
          resCode === 0 ||
          resCode === 200 ||
          subCode === 0;
        if (!isSuccess && resCode !== 3) {
          reportFlag = true;
          errorType = 'dataError';
          subMsg = '接口请求返回数据异常';
        }
      } else {
        reportFlag = true;
        errorType = 'statusError';
        subMsg = '接口请求错误，h5请求statusCode非200，或hybrid请求status非0，或未返回data字段';
      }
    }
    reportFlag &&
      draInterfaceCustomReport({
        subMsg,
        url,
        source,
        requestType,
        errorType,
        functionId: reqData?.functionId,
        appid: reqData?.appId,
        client: reqData?.client,
        clientVersion: reqData?.clientVersion,
        statusCode: res?.statusCode,
        status: res?.status,
        code: res?.data?.code || res?.data?.subCode, 
        errMsg: res?.errMsg || res?.msg || res?.message || res?.data?.echo, 
        originReqDataStr: JSON.stringify(reqData), 
        originResDataStr: JSON.stringify(res), 
      });
  }