8-5、自定义参数序列化

需求

在之前的章节中，我们对请求的url参数做了处理，我们会解析传入的params对象，根据一定的规则把它解析成字符串，然后添加在url后面。在解析的过程中，我们会对字符串encode，但是对于一些特殊字符串比如@、+等却并不转义，这是axios库默认的解析规则。当然，我们也希望自己定义解析规则，于是我们希望ts-axios能在请求配置中允许我们配置一个paramsSerializer函数来自定义参数的解析规则，该函数接受params参数，返回值作为解析后的结果，如：

axios.get('/more/get', {
  params: {
    a: 1,
    b: 2,
    c: ['a', 'b', 'c']
  },
  paramsSerializer(params) {
    return qs.stringify(params, { arrayFormat: 'brackets' })
  }
}).then(res => {
  console.log(res)
})

代码实现

首先修改类型定义:

interface AxiosRequestConfig {
// ...
  paramsSerializer?: (params: any) => string
}

修改buildUrl实现

function buildUrl(url: string, params?: any, paramsSerializer?: any) {
  // 去掉哈希符号
  const hashIndex = url.indexOf('#')
  if (hashIndex !== -1) {
    url = url.slice(0, hashIndex)
  }
  if (!params) {
    return url
  }
  let serializedParams
  if (paramsSerializer) {
    serializedParams = paramsSerializer(params)
  } else if (isURLSearchParams(params)) {
    serializedParams = params.toString()
  } else {
    const parts: string[] = []
    Object.keys(params).forEach(key => {
      let val = params[key]
      if (val === null || val === 'undefined') {
        return
      }

      let values: string[]
      if (Array.isArray(val)) {
        values = val
        key += '[]'
      } else {
        values = [val]
      }
      values.forEach(val => {
        if (isDate(val)) {
          val = val.toISOString()
        } else if (isPlainObject(val)){
          val = JSON.stringify(val)
        }
        parts.push(`${encode(key)}=${encode(val)}`)
      })
    })
    serializedParams = parts.join('&')
  }
  url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
  return url
}

这里，我们给buildUrl函数新增了paramsSerializer可选参数，另外我们还新增了对params类型判断，如果它是一个URLSearchParams对象实例的话，我们直接返回它toString的结果。
helpers/util.ts

function isURLSearchParams(val: any): val is URLSearchParams {
  return typeof val !== 'undefined' && val instanceof URLSearchParams
}

最后修改buildUrl的调用逻辑：

function transformURL(config: AxiosRequestConfig): string {
  const { url, params, paramsSerializer } = config
  return buildURL(url!, params, paramsSerializer)
}

demo

axios.get('/api/extend/get', {
  paramsSerializer(params) {
    return qs.stringify(params, { arrayFormat: 'brackets' })
  },
  params: {
    a: 1,
    b: 2,
    c: ['a', 'b', 'c']
  }
})
axios.get('/api/extend/get', {
  params: {
    a: 1,
    b: 2,
    c: ['a', 'b', 'c']
  }
})

axios.get('/api/extend/get', {
  params: new URLSearchParams('a=1&b=2')
})