:::tips 简单实现一个类似axios的库 github npm :::

处理请求url参数

需求分析

参数值为数组

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

最终的url是test.json?foo[]=bar&foo[]=baz


参数值为对象

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

最终的url是test.json?foo=%7b22%baz，foo后面拼接的是{bar: 'baz'} encode的结果


参数值为Date类型

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

最终的url是test.json?date=2020-11-24T05...，date后面拼接的是date.toISOString()的结果


空值忽略

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

最终url是test.json?foo=bar

丢弃url中的哈希标记

  1.     easyFetch({
  2.     url: 'test.json#hash',
  3.     method: 'get',
  4.     params: {
  5.       foo: 'bar'
  6.     }
  7.   })

最终url是test.json?foo=bar

保存已有的参数

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

最终url是test.json?foo=bar&bar=baz

buildURL函数实现

  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 buildURL(url: string, params?: any): string {
  15.     if(!params) return url
  17.     const parts:string[] = []
  19.     Object.keys(params).forEach(key => {
  20.             const val = params[key]
  21.             if(val === null || typeof val === 'undefined') return    
  23.             let values = []
  24.             if(Array.isArray(val)) {
  25.                 values = val
  26.                 key += '[]'
  27.             } else {
  28.                 values = [val]
  29.             }
  31.             values.forEach(val => {
  32.                 if(isDate(val)) {
  33.                     val = val.toISOString()
  34.                 }    else if(isObject(val)) {
  35.                     val = JSON.stringify(val)
  36.                 }
  37.                 parts.push(`${encode(key)}=${encode(val)}`)
  38.             })
  40.         })
  42.         let serializedParams = parts.join('&')
  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. }

处理请求body数据

XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null — MDN

  1.         easyFetch({
  2.             url: 'test.json',
  3.             method: 'post',
  4.             data: {
  5.                 a: 1,
  6.                 b: 2
  7.             }
  8.         })

如果是post请求，data是普通对象的话，需要通过JSON.stringify(data)转换成json字符串，符合XHR请求中要发送的数据体规范之一USVString 对象

处理headers

  1.         easyFetch({
  2.             url: 'test.json',
  3.             method: 'post',
  4.       headers: {
  5.         'content-type': 'application/json',
  6.                 'Accept': 'application/json'
  7.       },
  8.             data: {
  9.                 a: 1,
  10.                 b: 2
  11.             }
  12.         })
  • 如果是post请求，data是普通对象的话，用户没有定义headers，自动添加{``'content-type': 'application/json;charset=utf-8'``}
  • 如果用户有定义，也要保留用户的headers