问题现象

在实际开发中,应用需要在请求发送前,统一处理或记录请求参数信息。那么在Axios的请求拦截器中,如何以类型安全和兼容方式正确读取params和data?

import axios, {
  Axios,
  AxiosInstance,
  AxiosRequestHeaders,
  AxiosResponse,
  formToJSON,
  InternalAxiosRequestConfig,
  Method,
  AxiosRequestConfig,
  AxiosError
} from '@ohos/axios'
import { HostUtils, Logger } from '@ohos/utils'
const instance = axios.create({
  baseURL: HostUtils.getYiAppHost(),
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
})
instance.interceptors.request.use((config: InternalAxiosRequestConfig<null>) => {
  Logger.info('chris', 'baseUrl-->' + config.baseURL + '\turl-->' + config.url)
  if (config.params != null) {
    Logger.info('chris', 'params-->' + JSON.stringify(config.params))
  };
  addPublicHeader(config);
  if (config.method == 'post' || config.method == 'POST') {
    // 这里需要读取config.data里面的数据
    // 追回公共参数
    // addPublicParams
    // 计算sign拼到参数中
    // calculateSign
  } else {
    if (config.params == null || config.params == undefined) {
      config.params = {}
    }
    addPublicParams(config.params)
    Object.keys(config.params).forEach((key) => {
      Logger.info('key-->' + key, 'value-->' + config.params[key])
    })
    calculateSign(config.params)
    Object.keys(config.params).forEach((key) => {
      Logger.info('end key-->' + key, 'end value-->' + config.params[key])
    })
  }
  return config;
})

背景知识

  • 键值对:常用的读取配置文件参数的数据结构类型,具有结构扁平,易维护,便于序列化与解析的优势。
  • 泛型:使用泛型参数可灵活接收多种类型,增强接口在重载与拓展方面的适应能力。

解决方案

  1. 要把config.data里的数据都读出来,推荐使用Record转换成键值对形式后再进行处理。
  2. 又因为对于config里的数据类型未知或是采用原型object。可以使用Record<string, T>,在Record<string, T>中,T部分使用泛型,能将可能出现的类型都接收,或者使用type替代,方便使用。
axios.interceptors.request.use((request:InternalAxiosRequestConfig)=>{
  let params = request.params as Record<string, string| number| boolean |undefined | object>
  let data =  request.data as Record<string, string| number| boolean |undefined | object>
  return request
})

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐