JavaScript库urlcat 之URL构建器库

目录
  • 1.作用
  • 2.使用方法
    • 在Node.js中使用
    • 在Typescript中使用
    • 在Deno中使用
  • 3.API
    • ParamMap:具有字符串键的对象
    • urlcat:构建完整的 URL
    • query:构建查询字符串
    • subst:替换路径参数
    • join:使用一个分隔符连接两个字符串

urlcat 是一个小型的 JavaScript 库,它使构建 URL 非常方便并防止常见错误;

特性:

  • 友好的 API
  • 无依赖
  • 压缩后0.8KB大小
  • 提供TypeScript类型

1.作用

在调用 HTTP API 时,通常需要在 URL 中添加动态参数:

const API_URL = 'https://api.example.com/';

function getUserPosts(id, blogId, limit, offset) {
  const requestUrl = `${API_URL}/users/${id}/blogs/${blogId}/posts?limit=${limit}&offset=${offset}`;
  // send HTTP request
}

正如你所看到的,这个最小的例子已经很难阅读了。这也是不正确的:

  • 我忘记了 API_URL 常量末尾有一个斜杠,所以这导致了一个包含重复斜杠的URL(https://api.example.com//users)
  • 嵌入的值需要使用 encodeURIComponent 进行转义

我可以使用内置的 URL 类来防止重复的斜杠和 URLSearchParams 来转义查询字符串。但我仍然需要手动转义所有路径参数。

const API_URL = 'https://api.example.com/';

function getUserPosts(id, blogId, limit, offset) {
  const escapedId = encodeURIComponent(id);
  const escapedBlogId = encodeURIComponent(blogId);
  const path = `/users/${escapedId}/blogs/${escapedBlogId}`;
  const url = new URL(path, API_URL);
  url.search = new URLSearchParams({ limit, offset });
  const requestUrl = url.href;
  // send HTTP request
}

如此简单的任务,却又很难读,写也很乏味!这是这个小型库可以帮助您的地方:

const API_URL = 'https://api.example.com/';

function getUserPosts(id, limit, offset) {
  const requestUrl = urlcat(API_URL, '/users/:id/posts', { id, limit, offset });
  // send HTTP request
}

这个库会这样处理:

  • 转义所有参数
  • 将所有部分连接起来(它们之间总是正好有一个 / 和 ?)

2.使用方法

目前,该软件包通过 npm 分发。 (Zip 下载和 CDN 即将推出)。

npm install --save urlcat

在Node.js中使用

官方支持 Node 10 及更高版本。由于代码在内部使用 URL 和 URLSearchParams 类,它们在 v10 以下不可用,因此我们无法支持这些版本。

要构建完整的 URL(最常见的用例):

const urlcat = require('urlcat').default;

要使用任何一个实用函数:

const { query, subst, join } = require('urlcat');

要使用所有导出的函数:

const { default: urlcat, query, subst, join } = require('urlcat');

在Typescript中使用

官方支持 TypeScript 2.1 及更高版本。

要构建完整的 URL(最常见的用例):

import urlcat from 'urlcat';

要使用任何一个实用函数:

import { query, subst, join } from 'urlcat';

要使用所有导出的函数:

import urlcat, { query, subst, join } from 'urlcat';

在Deno中使用

import urlcat from 'https://deno.land/x/urlcat/src/index.ts';

console.log(urlcat('https://api.foo.com', ':name', { id: 25, name: 'knpwrs' }));

3.API

ParamMap:具有字符串键的对象

例如:{ firstParam: 1, 'second-param': 2 } 是一个有效的 ParamMap

urlcat:构建完整的 URL

function urlcat(baseUrl: string, pathTemplate: string, params: ParamMap): string
function urlcat(baseUrl: string, pathTemplate: string): string
function urlcat(baseTemplate: string, params: ParamMap): string

例如:

urlcat('https://api.example.com', '/users/:id/posts', { id: 123, limit: 10, offset: 120 })
→ 'https://api.example.com/users/123/posts?limit=10&offset=120'
urlcat('http://example.com/', '/posts/:title', { title: 'Letters & "Special" Characters' })
→ 'http://example.com/posts/Letters%20%26%20%22Special%22%20Characters'
urlcat('https://api.example.com', '/users')
→ 'https://api.example.com/users'
urlcat('https://api.example.com/', '/users')
→ 'https://api.example.com/users'
urlcat('http://example.com/', '/users/:userId/posts/:postId/comments', { userId: 123, postId: 987, authorId: 456, limit: 10, offset: 120 })
→ 'http://example.com/users/123/posts/987/comments?authorId=456&limit=10&offset=120'

query:构建查询字符串

使用指定的键值对构建查询字符串。键和值被转义,然后由 '&' 字符连接。

例如:

params result
{} ''
{ query: 'some text' } 'query=some%20text'
{ id: 42, 'comment-id': 86 } 'id=42&comment-id=86'
{ id: 42, 'a name': 'a value' } 'id=42&a%20name=a%20value'

subst:替换路径参数

用模板字符串中的值替换参数。模板可能包含 0 个或多个参数占位符。占位符以冒号 (:) 开头,后跟只能包含大写或小写字母的参数名称。在模板中找到的任何占位符都将替换为 params 中相应键下的值。

例如:

template params result
':id' { id: 42 } '42'
'/users/:id' { id: 42 } '/users/42'
'/users/:id/comments/:commentId' { id: 42, commentId: 86 } '/users/42/comments/86'
'/users/:id' { id: 42, foo: 'bar' } '/users/42'

join:使用一个分隔符连接两个字符串

仅使用一个分隔符连接两个部分。如果分隔符出现在 part1 的末尾或 part2 的开头,则将其删除,然后使用分隔符连接两个部分。

例如:

part1 separator part2 result
'first' ',' 'second' 'first,second'
'first,' ',' 'second'  
'first' ',' ',second'  
'first,' ',' ',second'  

到此这篇关于JavaScript库urlcat 之URL构建器库的文章就介绍到这了,更多相关JavaScript URL构建器库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题: 这是后台返回来的json数据(防止泄露重要信息IP地址打码了): 我在html里的引用是这样的: <a @click="downCom" > 下载执照 <i class="icon-down"></i> </a>

  • Springboot如何去掉URL后面的jsessionid

    目录 如何去掉URL后面的jsessionid url中有Jsessionid生成的原因 解决方式一 解决方式二 Java关于jsessionid和URL 对SEO的冲击 安全问题 解决之道 如何去掉URL后面的jsessionid url中有Jsessionid生成的原因 jsessionid是标明session的id,它存在于cookie中,一般情况不会出现在url中,服务器会从客户端的cookie中取出来,但是如果客户端禁用了cookie的话,就要重写url了,显式的将jsessionid

  • JavaScript数据在不同页面的传递(URL参数获取)

            网页中,我们常常遇到这种情况,当我们在某个页面输入信息的时候,会跳转到另一个页面,并且会将我们输入的信息传递到另一个页面中,怎样操作呢? 今天,我们就来实战一下,比如,现在有两个页面,当我们在一个页面输入用户信息的时候,就会跳转到另一个页面并显示,xx欢迎登录的界面. 先来看看设计思路: 第一个登录页面,里面有提交表单, action 提交到index.html页面 第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果 第二个页面之所以可以使用第一个页面

  • 关于JavaScript中URL对象的一些妙用

    目录 前言 解析参数 修改 URL 参数 总结 前言 URL 对象可能页端用的比较少一点,一般来说,页端对 URL 的操作,大部分都是解析 URL 参数,解析 URL 参数有比较多的库可以选,比如 qs,或者用浏览器原生的 URLSearchParams // 假设当前的 url 为 'https://www.test.com?a=1&b=2' const b = new URLSearchParams(location.search); const aParam = b.get('a'); /

  • JavaScript库urlcat 之URL构建器库

    目录 1.作用 2.使用方法 在Node.js中使用 在Typescript中使用 在Deno中使用 3.API ParamMap:具有字符串键的对象 urlcat:构建完整的 URL query:构建查询字符串 subst:替换路径参数 join:使用一个分隔符连接两个字符串 urlcat 是一个小型的 JavaScript 库,它使构建 URL 非常方便并防止常见错误: 特性: 友好的 API 无依赖 压缩后0.8KB大小 提供TypeScript类型 1.作用 在调用 HTTP API 时

  • 如何用JavaScript实现一个数组惰性求值库

    概述 在编程语言理论中,惰性求值(英语:Lazy Evaluation),又译为惰性计算.懒惰求值,也称为传需求调用(call-by-need),是一个计算机编程中的一个概念,它的目的是要最小化计算机要做的工作.它有两个相关而又有区别的含意,可以表示为"延迟求值"和"最小化求值",除可以得到性能的提升外,惰性计算的最重要的好处是它可以构造一个无限的数据类型. 看到函数式语言里面的惰性求值,想自己用JavaScript写一个最简实现,加深对惰性求值了解.用了两种方法,

  • C++ Cmake的构建静态库和动态库详解

    目录 静态库和动态库的区别 构建示例 ADD_LIBRARY 同时构建静态和动态库 SET_TARGET_PROPERTIES 动态库的版本号 安装共享库和头文件 使用外部共享库和头文件 解决 :make后头文件找不到的问题 解决:找到引用的函数问题 特殊的环境变量CMAKE_INCLUDE_PATH和CMAKE_LIBRARY_PATH 总结 静态库和动态库的区别 1.静态库的扩展名一般为".a"或者".lib":动态库的扩展名一般为".so"

  • python3中requests库重定向获取URL

    前言: 有时候 我们抓取一些页面,发现一些url 有重定向, 返回 301 ,或者302 这种情况. 那么我们如何获取真实的URL呢? 或者跳转后的URL呢? 这里我使用 requests 作为演示 假设我们要访问 某东的电子商务网站,我只记得网站好像是 http://jd.com import requests def request_jd(): url = 'http://jd.com/' #allow_redirects= False 这里设置不允许跳转 response = reques

  • python爬虫中的url下载器用法详解

    前期的入库筛选工作已经由url管理器完成了,整理的工作自然要由url下载器接手.当我们需要爬取的数据已经去重后,下载器的主要任务的是这些数据下载下来.所以它的使用也并不复杂,不过需要借助到我们之前所学过的一个库进行操作,相信之前的基础大家都学的很牢固.下面小编就来为大家介绍url下载器及其使用的方法. 下载器的作用就是接受URL管理器传递给它的一个url,然后把该网页的内容下载下来.python自带有urllib和urllib2等库(这两个库在python3中合并为urllib),它们的作用就是

  • JavaScript前端图片加载管理器imagepool使用详解

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />. 经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载

  • 基于JavaScript实现一个月饼音乐播放器

    目录 前言 页面布局 页面背景 左侧列表 中间播放器 右侧歌词部分 总结 前言 事情的经过是这样的,媳妇中秋发了一盒月饼,里面还有一个小蓝牙音响,她说如果这个音响是个月饼造型之类的是不是更能体现出中秋的气氛.于是我就想到了可以用代码给她实现一个啊,拿出了我仅有的一点点前端看家本领(我是搞后端的),浪费我三天假期,效果图如下,本来设想的挺好,可是由于本人能力有限,没有达到自己预想的目标,仅供娱乐! 页面布局 页面采用最简单的div+css进行布局,首先将页面分为三部分,分别为左边音乐列表,中间播放

  • Javascript验证用户输入URL地址是否为空及格式是否正确

    复制代码 代码如下: <script type="text/javascript"> function checkUrl() { var url = document.getElementById('url').value; if (url==''){ alert('URL 地址不能为空'); return false; } else if (!isURL(url)) { alert('URL 的格式应该是 http://www.jb51.net'); return fal

  • laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析

    本文实例讲述了laravel框架数据库操作.查询构建器.Eloquent ORM操作.分享给大家供大家参考,具体如下: 1.连接数据库 laravel连接数据库的配置文件位于config/database.php中,在其中connection字段中包含laravel所支持的数据库的配置信息,可以看到其中有主机.端口.数据库.用户名.密码等信息: 'mysql' => [ 'driver' => 'mysql', 'host' => env('DB_HOST', 'localhost'),

  • Laravel5.1 框架数据库查询构建器用法实例详解

    本文实例讲述了Laravel5.1 框架数据库查询构建器用法.分享给大家供大家参考,具体如下: 今儿个咱说说查询构建器.它比运行原生SQL要简单些,它的操作面儿也是比较广泛的. 1 查询结果 先来看看它的语法: public function getSelect() { $result = DB::table('articles')->get(); dd($result); } 查询构建器就是通过table方法返回的,使用get()可以返回一个结果集(array类型) 这里是返回所有的数据,当然

随机推荐