需求分析

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

  1. axios.get('/more/get', {
  2.   params: {
  3.     a: 1,
  4.     b: 2,
  5.     c: ['a', 'b', 'c']
  6.   },
  7.   paramsSerializer(params) {
  8.     return qs.stringify(params, { arrayFormat: 'brackets' })
  9.   }
  10. }).then(res => {
  11.   console.log(res)
  12. })

代码实现

首先修改一下类型定义。
types/index.ts：

  1. export interface AxiosRequestConfig {
  2.   // ...
  3.   paramsSerializer?: (params: any) => string
  4. }

然后修改 buildURL 函数的实现。
helpers/url.ts：

  1. export function buildURL(
  2.   url: string,
  3.   params?: any,
  4.   paramsSerializer?: (params: any) => string
  5. ): string {
  6.   if (!params) {
  7.     return url
  8.   }
  10.   let serializedParams
  12.   if (paramsSerializer) {
  13.     serializedParams = paramsSerializer(params)
  14.   } else if (isURLSearchParams(params)) {
  15.     serializedParams = params.toString()
  16.   } else {
  17.     const parts: string[] = []
  19.     Object.keys(params).forEach(key => {
  20.       const val = params[key]
  21.       if (val === null || typeof val === 'undefined') {
  22.         return
  23.       }
  24.       let values = []
  25.       if (Array.isArray(val)) {
  26.         values = val
  27.         key += '[]'
  28.       } else {
  29.         values = [val]
  30.       }
  31.       values.forEach(val => {
  32.         if (isDate(val)) {
  33.           val = val.toISOString()
  34.         } else if (isPlainObject(val)) {
  35.           val = JSON.stringify(val)
  36.         }
  37.         parts.push(`${encode(key)}=${encode(val)}`)
  38.       })
  39.     })
  41.     serializedParams = parts.join('&')
  42.   }
  44.   if (serializedParams) {
  45.     const markIndex = url.indexOf('#')
  46.     if (markIndex !== -1) {
  47.       url = url.slice(0, markIndex)
  48.     }
  50.     url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
  51.   }
  53.   return url
  54. }

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

  1. export function isURLSearchParams(val: any): val is URLSearchParams {
  2.   return typeof val !== 'undefined' && val instanceof URLSearchParams
  3. }

最后我们要修改 buildURL 调用的逻辑。
core/dispatchRequest.ts：

  1. function transformURL(config: AxiosRequestConfig): string {
  2.   const { url, params, paramsSerializer } = config
  3.   return buildURL(url!, params, paramsSerializer)
  4. }

demo 编写

  1. axios.get('/more/get', {
  2.   params: new URLSearchParams('a=b&c=d')
  3. }).then(res => {
  4.   console.log(res)
  5. })
  7. axios.get('/more/get', {
  8.   params: {
  9.     a: 1,
  10.     b: 2,
  11.     c: ['a', 'b', 'c']
  12.   }
  13. }).then(res => {
  14.   console.log(res)
  15. })
  17. const instance = axios.create({
  18.   paramsSerializer(params) {
  19.     return qs.stringify(params, { arrayFormat: 'brackets' })
  20.   }
  21. })
  23. instance.get('/more/get', {
  24.   params: {
  25.     a: 1,
  26.     b: 2,
  27.     c: ['a', 'b', 'c']
  28.   }
  29. }).then(res => {
  30.   console.log(res)
  31. })

我们编写了 3 种情况的请求，第一种满足请求的 params 参数是 URLSearchParams 对象类型的。后两种请求的结果主要区别在于前者并没有对 [] 转义，而后者会转义。
至此，ts-axios 实现了自定义参数序列化功能，用户可以配置 paramsSerializer 自定义参数序列化规则。下一节课我们来实现 ts-axios 对 baseURL 的支持。