在处理网络请求时，了解如何获取和使用请求的URL是非常重要的。Fetch API 提供了一个名为 request.url 的属性，它可以帮助我们获取当前请求的完整URL。本章将详细介绍 request.url 属性的功能、用途以及相关示例。
获取请求的URL
request.url 是一个只读属性，返回了当前请求的完整URL字符串。这个属性对于需要根据请求的来源或目标进行逻辑处理的应用程序非常有用。例如，你可以通过检查请求的URL来决定是否执行特定的操作，或者用于记录日志等。
示例代码
fetch('https://api.example.com/data')
.then(response => {
console.log('请求的完整URL是:', response.url);
})
.catch(error => {
console.error('请求失败:', error);
});在这个例子中，我们向 https://api.example.com/data 发送了一个 GET 请求，并在请求成功后打印出请求的完整URL。
URL 对象的使用
虽然 request.url 返回的是一个字符串，但在某些情况下，你可能需要更复杂的 URL 操作，如解析查询参数、更改协议部分或路径等。这时可以使用 JavaScript 内置的 URL 对象来处理这些需求。
创建 URL 对象
首先，让我们看看如何创建一个 URL 对象：
const url = new URL('https://api.example.com/data?param1=value1¶m2=value2');
console.log(url.href); // 输出完整的URL使用 URL 对象获取信息
URL 对象提供了许多有用的属性和方法，可以方便地访问 URL 的各个部分：
url.searchParams：允许你轻松地操作查询字符串。url.protocol：获取协议部分（例如 "https:"）。url.host：获取主机名和端口号（如果存在）。url.pathname：获取路径部分。
示例代码
下面的例子展示了如何使用 URL 对象来解析和修改请求的 URL：
// javascriptcn.com 代码示例
fetch('https://api.example.com/data?param1=value1¶m2=value2')
.then(response => {
const urlObj = new URL(response.url);
console.log('请求协议:', urlObj.protocol);
console.log('请求路径:', urlObj.pathname);
console.log('请求查询参数:', urlObj.searchParams);
})
.catch(error => {
console.error('请求失败:', error);
});在这个例子中，我们不仅获取了请求的完整 URL，还进一步解析了 URL 的各个部分，包括协议、路径以及查询参数。
URL 对象与 Fetch API 的结合使用
由于 request.url 返回的是一个字符串，因此在需要对 URL 进行复杂操作时，通常会先将其转换为 URL 对象。这使得我们可以更容易地进行各种 URL 相关的操作。
示例代码
假设我们希望将请求的 URL 路径从 /data 更改为 /info，可以这样做：
// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
.then(response => {
const urlObj = new URL(response.url);
urlObj.pathname = '/info';
console.log('修改后的URL:', urlObj.href);
})
.catch(error => {
console.error('请求失败:', error);
});在这个例子中，我们创建了一个 URL 对象，然后修改了其 pathname 属性，从而实现了对请求 URL 的修改。
小结
通过本章的学习，你应该已经掌握了如何使用 request.url 属性来获取请求的完整 URL，以及如何利用 URL 对象来进行更复杂的 URL 处理。这些知识对于前端开发人员来说非常重要，特别是在构建需要动态处理不同来源或目标请求的应用程序时。希望这些示例能够帮助你在实际项目中更加灵活地使用 Fetch API。