Shulou(Shulou.com)06/01 Report--

The main content of this article is to explain "what is the role of JavaScript's library urlcat", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the function of urlcat, the library of JavaScript?"

Urlcat is a small JavaScript library that makes it easy to build URL and prevent common errors

Properties:

Friendly API

No dependence

0.8KB size after compression

Provide TypeScript type

1. Action

When calling HTTP API, you usually need to add dynamic parameters to the 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}

As you can see, this smallest example is already difficult to read. This is also incorrect:

I forgot that there is a slash at the end of the API_URL constant, so this results in a URL (https://api.example.com//users)) that contains repeated slashes

Embedded values need to be escaped using encodeURIComponent

I can use the built-in URL class to prevent duplicate slashes and URLSearchParams to escape the query string. But I still need to escape all path parameters manually.

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}

Such a simple task is difficult to read and boring to write! This is where this mini-library can help you:

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}

The library will be dealt with as follows:

Escape all parameters

Connect all the parts (there is always a / and?)

two。 Usage

Currently, the package is distributed through npm. (Zip download and CDN will be available soon).

Npm install-- save urlcat is used in Node.js

Node 10 and later are officially supported. Because the code uses URL and URLSearchParams classes internally, they are not available below V10, so we cannot support these versions.

To build a complete URL (the most common use case):

Const urlcat = require ('urlcat'). Default

To use any of the utility functions:

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

To use all exported functions:

Const {default: urlcat, query, subst, join} = require ('urlcat'); used in Typescript

TypeScript 2.1 and later are officially supported.

To build a complete URL (the most common use case):

Import urlcat from 'urlcat'

To use any of the utility functions:

Import {query, subst, join} from 'urlcat'

To use all exported functions:

Import urlcat, {query, subst, join} from 'urlcat'; uses import urlcat from' https://deno.land/x/urlcat/src/index.ts';console.log(urlcat('https://api.foo.com','in Deno: name', {id: 25, name: 'knpwrs'}); 3.APIParamMap: an object with string keys

For example: {firstParam: 1, 'second-param': 2} is a valid ParamMap.

Urlcat: build a complete URLfunction urlcat (baseUrl: string, pathTemplate: string, params: ParamMap): stringfunction urlcat (baseUrl: string, pathTemplate: string): stringfunction urlcat (baseTemplate: string, params: ParamMap): string

For example:

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: building query strings

Builds a query string using the specified key-value pair. Keys and values are escaped and then concatenated by the'& 'character.

For example:

Paramsresult {}'{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: replace path parameters

Replace the parameter with the value in the template string. The template may contain 0 or more parameter placeholders. Placeholders begin with a colon (:), followed by parameter names that can only contain uppercase or lowercase letters. Any placeholder found in the template is replaced with the value under the corresponding key in params.

For example:

Templateparamsresult':id' {id: 42}'42 foo id / users/42'join: concatenate two strings using a delimiter to concatenate two strings using a delimiter

Connect two parts with only one delimiter. If the delimiter appears at the end of the part1 or the beginning of the part2, delete it and use the delimiter to connect the two parts.

For example:

Part1separatorpart2result'first'',''second''first,second''first,'',''second''first'','',second''first,'','',second' so far, I believe you have a deeper understanding of "what is the role of JavaScript's library urlcat?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.