url-search-params-polyfill

2018-10-11 admin

url-search-params-polyfill是什么

什么是url-search-params-polyfill,a simple polyfill for javascript URLSearchParams

url-search-params-polyfill使用教程帮助文档

URLSearchParams Polyfill

This is a polyfill library for JavaScript’s URLSearchParams class. This library has implemented all features from MDN document.

This library can use for both browsers and Node.js.

Some browsers have native URLSearchParams class support, but not full. The new 2.x version detects if browsers have full feature support and extends it.

Installation

This can also be installed with npm.

$ npm install url-search-params-polyfill --save

For Babel and ES2015+, make sure to import the file:

import 'url-search-params-polyfill';

For ES5:

require('url-search-params-polyfill');

For browser, copy the index.js file to your project, and add a script tag in your html:

<script src="index.js"></script>

Usage

Use URLSearchParams directly. You can instantiate a new instance of URLSearchParams from a string or an object.

// new an empty object
var search1 = new URLSearchParams();

// from a string
var search2 = new URLSearchParams("id=1&from=home");

// from an object
var search3 = new URLSearchParams({ id: 1, from: "home" });

// from location.search, will remove first "?" automatically
var search4 = new URLSearchParams(window.location.search);

// from anther URLSearchParams object
var search5 = new URLSearchParams(search2);

append

var search = new URLSearchParams();

search.append("id", 1);

delete

search.delete("id");

get

search.get("id");

getAll

search.getAll("id");

has

search.has("id");

set

search.set("id", 2);

toString

search.toString();

sort

search.sort();

forEach

search.forEach(function (item) {
  console.log(item);
});

keys

for (var key of search.keys()) {
  console.log(key);
}

values

for (var value of search.values()) {
  console.log(value);
}

for…of

for (var item of search) {
  console.log('key: ' + item[0] + ', ' + 'value: ' + item[1]);
}

Known Issues

Use with fetch (#18)

Via fetch spec, when passing a URLSearchParams object as a request body, the request should add a header with Content-Type: application/x-www-form-urlencoded; charset=UTF-8, but browsers which have fetch support and not URLSearchParams support do not have this behavior.

Via the data of caniuse, there are many browsers which support fetch but not URLSearchParams:

Edge Chrome Opera Samsung Internet QQ Baidu
14 - 16 40 - 48 27 - 35 4 1.2 7.12

If you want to be compatible with these browsers, you should add a Content-Type header manually:

function myFetch(url, { headers = {}, body }) {
    headers = headers instanceof Headers ? headers : new Headers(headers);

    if (body instanceof URLSearchParams) {
        headers.set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }

    fetch(url, {
        headers,
        body
    });
}

LICENSE

MIT license

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42416.html

文章标题:url-search-params-polyfill

回到顶部