从 XHR 对象获取 GET 请求的 URL

在前端开发中，我们经常需要发送 Ajax 请求来获取数据。其中，GET 请求是最常见的一种类型。但是有时候我们需要获取该请求的 URL，以便进行一些处理，比如打印日志或者进行缓存。本文将介绍如何从 XHR 对象中获取 GET 请求的 URL。

XHR 是什么

XHR（XMLHttpRequest）是 JavaScript 中用于发送异步 HTTP 请求的 API。它可以向服务器发送请求并接收响应，而不会阻止页面的加载。XHR 是以异步方式工作的，也就是说，当请求被发送出去后，代码可以继续执行而不必等待响应。

获取 GET 请求的 URL

对于 GET 请求，URL 包含在请求的地址中。因此，我们可以通过 XHR 对象的 open() 方法中传递的第一个参数来获取 URL。

示例代码如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data?id=123');
console.log(xhr.responseURL); // 输出 https://example.com/api/data?id=123

在上面的示例中，我们创建了一个 XHR 对象，并使用其 open() 方法发送了一个 GET 请求。open() 方法接受两个参数：请求的方法和请求的 URL。通过访问 XHR 对象的 responseURL 属性，我们可以获取完整的请求 URL。

需要注意的是，对于跨域请求，responseURL 属性可能会返回经过跨域处理后的 URL，而不是原始的请求 URL。

总结

本文介绍了如何从 XHR 对象中获取 GET 请求的 URL。通过访问 responseURL 属性，我们可以获得完整的请求 URL。对于使用 GET 请求的应用程序来说，这个技巧可能很有用，比如在记录日志或者缓存请求结果时。

需要注意的是，该技巧只适用于 GET 请求。如果您想要获取 POST 请求的 URL，那么会比较困难，因为 POST 请求的参数通常包含在请求体中，而不是 URL 中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31127