处理url与params参数

Object.keys()

**Object.keys()** 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致

简单而言，就是将对象类型转换为枚举类型

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)) //["0","1","2"]
Object.keys(arr).forEach((key) => {
    console.log(arr[key])
})
// a b c

encodeURIComponent()编码

为什么使用 encodeURIComponent()

在使用 URL 传参的时候，如果参数中有空格等特殊字符，浏览器可能只会读取到空格面前的内容，导部分致数据丢失。

可以使用 encodeURIComponent() 方法，将这些特殊字符进行转义，这样就可以正常读取了。

判断数据类型

const toString = Object.prototype.toString

// 判断是否是日期类型
export function isDate(val : any) : boolean {
    return toString.call(val) === '[object.Date]'
}

// 判断是否为对象类型
export function isObject(val : any) : boolean {
    // type val === 'object' ，如果val是null，也会返回true
    return val !== null && typeof val === 'object'
}

编写处理函数

import { isDate, isObject } from "./utils"

function encode(val : string) : string {
    // 对url进行编码并处理特殊字符
    return encodeURIComponent(val)
        //ig为全局查找，忽略大小写
        .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{
    // 没有params就直接返回url，无需拼接
    if (!params){
        return url
    }

    const parts : string[] = []

    Object.keys(params).forEach((key) => {
        // key对应的是索引值，数组索引值默认从0开始，对象的索引值为key
        const val = params[key]
        // 如果传入的params参数有null或者undefined，那么就处理下一个参数
        if (val === null || typeof val === 'undefined'){
            // 此处的return不是退出循环，而是处理下一个参数
            return
        }
        let values = []
        // 如果这个参数是数组
        if(Array.isArray(val)) {
            values = val
            key += '[]'
        }else{
            // 如果不是数组，那就把它统一变为数组
            values = [val]
        }

        values.forEach((val) => {
            if(isDate(val)) {
                //toISOString()方法返回一个 ISO（ISO 格式的字符串： YYYY-MM-DDTHH:mm:ss.sssZ。
                val = val.toISOString()
            }else if (isObject(val)) {
                val = JSON.stringify(val)
            }
            parts.push(`${encode(key)}=${encode(val)}`)
        })
    })
    // 将参数以&进行连接
    let serializedParams = parts.join('&')

    // 如果params参数都为空，parts是一个空数组
    if (serializedParams) {
        // 查找url中是否有hash的表示，即#，因为需要忽略
        const markIndex = url.indexOf('#')
        if (markIndex !== -1) {
            // 存在就需要删除
            url = url.slice(0,markIndex)
        }
        // 在params参数之前需要一个?
        url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
    }

    return url

}