美文网首页
8-5、自定义参数序列化

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

作者: Eileen_1d88 | 来源:发表于2019-12-17 19:00 被阅读0次
    需求

    在之前的章节中,我们对请求的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')
    })
    

    相关文章

      网友评论

          本文标题:8-5、自定义参数序列化

          本文链接:https://www.haomeiwen.com/subject/vqbsnctx.html