@conecli/cone-render 0.9.1-shop2.29 → 0.9.1-shop2.30

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()
      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(): boolean {
    try {
      if (!isJdApp || !isSupportHybridHttpRequest || 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 reqParams = {
          url: isIosDevice ? `${changeCurrentUrl}/` : changeCurrentUrl, 
          functionId: data?.functionId,
          body: data?.body,
          headerType: '0', 
        }
        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 isSuccess = resCode === 0 || resCode === 200
        if (!isSuccess) {
          reportFlag = true
          errorType = 'dataError'
          subMsg = '接口请求返回数据异常'
        }
      } else {
        reportFlag = true
        errorType = 'statusError'
        subMsg = '接口请求本身异常'
      }
    }
    reportFlag &&
      draInterfaceCustomReport({
        subMsg,
        url,
        source,
        requestType,
        errorType,
        ...reqData,
        ...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()
      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(): boolean {
    try {
      if (!isJdApp || !isSupportHybridHttpRequest || 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 isSuccess = resCode === 0 || resCode === 200
        if (!isSuccess) {
          reportFlag = true
          errorType = 'dataError'
          subMsg = '接口请求返回数据异常'
        }
      } else {
        reportFlag = true
        errorType = 'statusError'
        subMsg = '接口请求本身异常'
      }
    }
    reportFlag &&
      draInterfaceCustomReport({
        subMsg,
        url,
        source,
        requestType,
        errorType,
        ...reqData,
        ...res,
      })
  }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@conecli/cone-render",
-	"version": "0.9.1-shop2.29",
+	"version": "0.9.1-shop2.30",
 	"private": false,
 	"files": [
 		"dist/"