TypeScript 从零实现 axios 0x3 基础功能实现——处理请求URL参数

最新推荐文章于 2024-09-20 11:58:31 发布

原创

最新推荐文章于 2024-09-20 11:58:31 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #axios #TS #Node #XHR

这篇博客介绍了如何从零开始用TypeScript实现axios的基础功能，重点在于处理请求URL的参数。通过新增工具函数和URL拼接方法，详细阐述了URL参数处理逻辑，并提供了测试案例进行验证。

新增工具函数

./src/helpers/util.ts

const toString = Object.prototype.toString

export function isDate(val: any): val is Date {
  return toString.call(val) === '[object Date]'
}

export function isObject(val: any): val is Object {
  return val !== null && typeof val !== 'object'
}

新增URL拼接方法

./src/helpers/url.ts

import { isDate, isObject } from './util'

function encode(val: string): string {
  return encodeURIComponent(val)
    .replace(/%40/g, '@')
    .replace(/%3A/ig, ':')
    .replace(/%24/g, '$')
    .replace(/%2C/ig, ',')
    .replace(/%20/g, '+')
    .replace(/%5B/ig, '[')
    .replace(/%5D/ig, ']')
}

export function buildURL(url: string, params?: any): string {
  if (!params) {
    return url
  }

  const parts: string[] = []
  Object.keys(params).forEach(key => {
    const val = params[key]
    if (val === null || typeof val === 'undefined') {