IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> TS重构axios—— 处理url与params参数 -> 正文阅读

[游戏开发]TS重构axios—— 处理url与params参数

处理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

}
  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-03-15 22:58:26  更:2022-03-15 23:01:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/16 17:59:11-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码