处理请求 url 参数

需求分析

还记得我们上节课遗留了一个问题，再来看这个例子：

  1. axios({
  2.   method: 'get',
  3.   url: '/base/get',
  4.   params: {
  5.     a: 1,
  6.     b: 2
  7.   }
  8. })

我们希望最终请求的 url 是 /base/get?a=1&b=2，这样服务端就可以通过请求的 url 解析到我们传来的参数数据了。实际上就是把 params 对象的 key 和 value 拼接到 url 上。

再来看几个更复杂的例子。

参数值为数组

  1. axios({
  2.   method: 'get',
  3.   url: '/base/get',
  4.   params: {
  5.     foo: ['bar', 'baz']
  6.   }
  7. })

最终请求的 url 是 /base/get?foo[]=bar&foo[]=baz'。

参数值为对象

  1. axios({
  2.   method: 'get',
  3.   url: '/base/get',
  4.   params: {
  5.     foo: {
  6.       bar: 'baz'
  7.     }
  8.   }
  9. })

最终请求的 url 是 /base/get?foo=%7B%22bar%22:%22baz%22%7D，foo 后面拼接的是 {"bar":"baz"} encode 后的结果。

参数值为 Date 类型

  1. const date = new Date()
  3. axios({
  4.   method: 'get',
  5.   url: '/base/get',
  6.   params: {
  7.     date
  8.   }
  9. })

最终请求的 url 是 /base/get?date=2019-04-01T05:55:39.030Z，date 后面拼接的是 date.toISOString() 的结果。

特殊字符支持

对于字符 @、:、$、,、`、[、]，我们是允许出现在url` 中的，不希望被 encode。

  1. axios({
  2.   method: 'get',
  3.   url: '/base/get',
  4.   params: {
  5.     foo: '@:$, '
  6.   }
  7. })

最终请求的 url 是 /base/get?foo=@:$+，注意，我们会把空格 ` 转换成+`。

空值忽略

对于值为 null 或者 undefined 的属性，我们是不会添加到 url 参数中的。

  1. axios({
  2.   method: 'get',
  3.   url: '/base/get',
  4.   params: {
  5.     foo: 'bar',
  6.     baz: null
  7.   }
  8. })

最终请求的 url 是 /base/get?foo=bar。

丢弃 url 中的哈希标记

  1. axios({
  2.   method: 'get',
  3.   url: '/base/get#hash',
  4.   params: {
  5.     foo: 'bar'
  6.   }
  7. })

最终请求的 url 是 /base/get?foo=bar

保留 url 中已存在的参数

  1. axios({
  2.   method: 'get',
  3.   url: '/base/get?foo=bar',
  4.   params: {
  5.     bar: 'baz'
  6.   }
  7. })

最终请求的 url 是 /base/get?foo=bar&bar=baz

buildURL 函数实现

根据我们之前的需求分析，我们要实现一个工具函数，把 params 拼接到 url 上。我们希望把项目中的一些工具函数、辅助方法独立管理，于是我们创建一个 helpers 目录，在这个目录下创建 url.ts 文件，未来会把处理 url 相关的工具函数都放在该文件中。

helpers/url.ts：

  1. import { isDate, isObject } from './util'
  3. function encode (val: string): string {
  4.   return encodeURIComponent(val)
  5.     .replace(/%40/g, '@')
  6.     .replace(/%3A/gi, ':')
  7.     .replace(/%24/g, '$')
  8.     .replace(/%2C/gi, ',')
  9.     .replace(/%20/g, '+')
  10.     .replace(/%5B/gi, '[')
  11.     .replace(/%5D/gi, ']')
  12. }
  14. export function bulidURL (url: string, params?: any) {
  15.   if (!params) {
  16.     return url
  17.   }
  19.   const parts: string[] = []
  21.   Object.keys(params).forEach((key) => {
  22.     let val = params[key]
  23.     if (val === null || typeof val === 'undefined') {
  24.       return
  25.     }
  26.     let values: string[]
  27.     if (Array.isArray(val)) {
  28.       values = val
  29.       key += '[]'
  30.     } else {
  31.       values = [val]
  32.     }
  33.     values.forEach((val) => {
  34.       if (isDate(val)) {
  35.         val = val.toISOString()
  36.       } else if (isObject(val)) {
  37.         val = JSON.stringify(val)
  38.       }
  39.       parts.push(`${encode(key)}=${encode(val)}`)
  40.     })
  41.   })
  43.   let serializedParams = parts.join('&')
  45.   if (serializedParams) {
  46.     const markIndex = url.indexOf('#')
  47.     if (markIndex !== -1) {
  48.       url = url.slice(0, markIndex)
  49.     }
  51.     url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
  52.   }
  54.   return url
  55. }

helpers/util.ts：

  1. const toString = Object.prototype.toString
  3. export function isDate (val: any): val is Date {
  4.   return toString.call(val) === '[object Date]'
  5. }
  7. export function isObject (val: any): val is Object {
  8.   return val !== null && typeof val === 'object'
  9. }

实现 url 参数处理逻辑

我们已经实现了 buildURL 函数，接下来我们来利用它实现 url 参数的处理逻辑。

在 index.ts 文件中添加如下代码：

  1. function axios (config: AxiosRequestConfig): void {
  2.   processConfig(config)
  3.   xhr(config)
  4. }
  6. function processConfig (config: AxiosRequestConfig): void {
  7.   config.url = transformUrl(config)
  8. }
  10. function transformUrl (config: AxiosRequestConfig): string {
  11.   const { url, params } = config
  12.   return bulidURL(url, params)
  13. }

在执行 xhr 函数前，我们先执行 processConfig 方法，对 config 中的数据做处理，除了对 url 和 params 处理之外，未来还会处理其它属性。

在 processConfig 函数内部，我们通过执行 transformUrl 函数修改了 config.url，该函数内部调用了 buildURL。

那么至此，我们对 url 参数处理逻辑就实现完了，接下来我们就开始编写 demo 了。

demo 编写

在 examples 目录下创建 base 目录，在 base 目录下创建 index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Base example</title>
  6.   </head>
  7.   <body>
  8.     <script src="/__build__/base.js"></script>
  9.   </body>
  10. </html>

接着创建 app.ts 作为入口文件：

  1. import axios from '../../src/index'
  3. axios({
  4.   method: 'get',
  5.   url: '/base/get',
  6.   params: {
  7.     foo: ['bar', 'baz']
  8.   }
  9. })
  11. axios({
  12.   method: 'get',
  13.   url: '/base/get',
  14.   params: {
  15.     foo: {
  16.       bar: 'baz'
  17.     }
  18.   }
  19. })
  21. const date = new Date()
  23. axios({
  24.   method: 'get',
  25.   url: '/base/get',
  26.   params: {
  27.     date
  28.   }
  29. })
  31. axios({
  32.   method: 'get',
  33.   url: '/base/get',
  34.   params: {
  35.     foo: '@:$, '
  36.   }
  37. })
  39. axios({
  40.   method: 'get',
  41.   url: '/base/get',
  42.   params: {
  43.     foo: 'bar',
  44.     baz: null
  45.   }
  46. })
  48. axios({
  49.   method: 'get',
  50.   url: '/base/get#hash',
  51.   params: {
  52.     foo: 'bar'
  53.   }
  54. })
  56. axios({
  57.   method: 'get',
  58.   url: '/base/get?foo=bar',
  59.   params: {
  60.     bar: 'baz'
  61.   }
  62. })

接着在 server.js 添加新的接口路由：

  1. router.get('/base/get', function(req, res) {
  2.   res.json(req.query)
  3. })

然后在命令行运行 npm run dev，接着打开 chrome 浏览器，访问 http://localhost:8080/ 即可访问我们的 demo 了，我们点到 Base 目录下，通过开发者工具的 network 部分我们可以看到成功发送的多条请求，并可以观察它们最终请求的 url，已经如期添加了请求参数。

那么至此我们的请求 url 参数处理编写完了，下一小节我们会对 request body 数据做处理。