青岛市住房和城乡建设局网站查询,私密浏览器直播,网站开发的经济可行性,天津外包加工网应用场景
最近在项目中看到一种新的文件下载方式,原理是将[后台地址接口地址请求参数]拼接成一个url,直接将下载任务丢给浏览器去执行.但是在需要校验token的项目中,需要后台单独给这个接口放开token校验
location.href 相关内容
window.location.protocol: 返回当前 URL 的…应用场景
最近在项目中看到一种新的文件下载方式,原理是将[后台地址接口地址请求参数]拼接成一个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 的查询字符串部分例如?keyvalue。 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(?key1value1key2value2);// 使用数组
const params2 new URLSearchParams([[key1, value1],[key2, value2]
]);2.获取参数值
你可以通过 get 方法来获取单个参数的值或者通过 getAll 方法来获取所有同名参数的值。
const params new URLSearchParams(?key1value1key2value2key2value3);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()); // 输出: key1value1key2value2key2value34.删除参数
你可以使用 delete 方法来删除指定名称的参数。 const params new URLSearchParams(?key1value1key2value2);params.delete(key1);console.log(params.toString()); // 输出: key2value25.与 URL 对象配合使用
URLSearchParams 通常与 URL 对象一起使用以方便地处理 URL 及其查询参数。
const url new URL(https://example.com/?key1value1key2value2);
const params url.searchParams;console.log(params.get(key1)); // 输出: value1params.set(key1, newvalue1);
params.append(key3, value3);console.log(url.href); // 输出: https://example.com/?key2value2key1newvalue1key3value36.迭代参数
你可以通过 forEach 方法或者 [Symbol.iterator] 来迭代所有的键值对。
const params new URLSearchParams(?key1value1key2value2);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(?key1value1key2value2);
const obj {};for (const [key, value] of params) {obj[key] value;
}console.log(obj); // 输出: { key1: value1, key2: value2 }8.处理多个同名参数
当有多个同名参数时URLSearchParams 可以很好地处理这些情况。
const params new URLSearchParams(?keyvalue1keyvalue2);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()); // 输出: nameJohnDoetaghelloworld
