Detect if browsers have full support for URLSearchParams and extend it
Compatible with IE8 and above
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 objectvar search1 = new URLSearchParams();// from a stringvar search2 = new URLSearchParams("id=1&from=home");// from an objectvar search3 = new URLSearchParams({ id: 1, from: "home" });// from location.search, will remove first "?" automaticallyvar search4 = new URLSearchParams(window.location.search);// from anther URLSearchParams objectvar search5 = new URLSearchParams(search2);// from a sequencevar search6 = new URLSearchParams([["foo", 1], ["bar", 2]]);
append
var search = new URLSearchParams();search.append("id", 1);
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
});
}