应用场景
最近在项目中看到一种新的文件下载方式,原理是将[后台地址+接口地址+请求参数]拼接成一个url,直接将下载任务丢给浏览器去执行.但是在需要校验token的项目中,需要后台单独给这个接口放开token校验
location.href 相关内容
window.location.protocol: 返回当前 URL 的协议部分(例如:http: 或 https:)。
window.location.host: 返回当前 URL 的主机名和端口(例如:www.example.com:8080)。
window.location.hostname: 返回当前 URL 的主机名(例如:www.example.com)。
window.location.port: 返回当前 URL 的端口号(例如:8080)。
window.location.pathname: 返回当前 URL 的路径部分(例如:/path/to/page)。
window.location.search: 返回当前 URL 的查询字符串部分(例如:?key=value)。
window.location.hash: 返回当前 URL 的锚点部分(例如:#section1)。
代码
interface StringObject {[key: string]: string;
}const exportFile = async (params: StringObject = {}, url: string = '') => {try {const newUrl = (params: StringObject): String => {const urlParams = new URLSearchParams(params);// url是服务器地址+端口return `${window.location.protocol + "//"}${url}${'你的接口地址'}${urlParams}`;}window.location.href = newUrl()} catch (error) {console.log(error);}
};
URLSearchParams 对象
URLSearchParams 是 JavaScript 中用于处理 URL 查询字符串的一个内置对象
1.创建 URLSearchParams 实例
你可以通过传递一个查询字符串或者一个键值对数组来创建 URLSearchParams 实例。
// 使用查询字符串
const params1 = new URLSearchParams('?key1=value1&key2=value2');// 使用数组
const params2 = new URLSearchParams([['key1', 'value1'],['key2', 'value2']
]);
2.获取参数值
你可以通过 get 方法来获取单个参数的值,或者通过 getAll 方法来获取所有同名参数的值。
const params = new URLSearchParams('?key1=value1&key2=value2&key2=value3');console.log(params.get('key1')); // 输出: value1
console.log(params.getAll('key2')); // 输出: ['value2', 'value3']
3.设置参数值
你可以使用 set 方法来设置或更新参数的值,使用 append 方法来添加多个同名参数。
const params = new URLSearchParams();params.set('key1', 'value1');
params.append('key2', 'value2');
params.append('key2', 'value3');console.log(params.toString()); // 输出: key1=value1&key2=value2&key2=value3
4.删除参数
你可以使用 delete 方法来删除指定名称的参数。
const params = new URLSearchParams('?key1=value1&key2=value2');params.delete('key1');console.log(params.toString()); // 输出: key2=value2
5.与 URL 对象配合使用
URLSearchParams 通常与 URL 对象一起使用,以方便地处理 URL 及其查询参数。
const url = new URL('https://example.com/?key1=value1&key2=value2');
const params = url.searchParams;console.log(params.get('key1')); // 输出: value1params.set('key1', 'newvalue1');
params.append('key3', 'value3');console.log(url.href); // 输出: https://example.com/?key2=value2&key1=newvalue1&key3=value3
6.迭代参数
你可以通过 forEach 方法或者 [Symbol.iterator] 来迭代所有的键值对。
const params = new URLSearchParams('?key1=value1&key2=value2');params.forEach((value, key) => {console.log(`${key}: ${value}`);
});// 或者使用 for...of 循环
for (const [key, value] of params) {console.log(`${key}: ${value}`);
}
7.将参数转换为对象
有时你需要将 URLSearchParams 转换为普通的 JavaScript 对象。
const params = new URLSearchParams('?key1=value1&key2=value2');
const obj = {};for (const [key, value] of params) {obj[key] = value;
}console.log(obj); // 输出: { key1: 'value1', key2: 'value2' }
8.处理多个同名参数
当有多个同名参数时,URLSearchParams 可以很好地处理这些情况。
const params = new URLSearchParams('?key=value1&key=value2');console.log(params.getAll('key')); // 输出: ['value1', 'value2']
9.编码和解码
URLSearchParams 会自动处理参数的编码和解码。
const params = new URLSearchParams();params.append('name', 'John Doe');
params.append('tag', 'hello world');console.log(params.toString()); // 输出: name=John+Doe&tag=hello+world