在前端开发中，我们经常会用到网络请求，而 URL 是我们通常用于网络请求的载体。在代码中与 URL 打交道时，我们需要保证一些基本的操作，例如检查 URL 是否合法、处理 URL 的各个组成部分等等。同时，我们也需要充分利用 Promise，使得我们的网络请求可以变得更加简洁和可读。
如何检查 URL 是否合法？
URL 是由多个组成部分构成的，例如协议，域名，路径等等。为了保证 URL 的合法性，我们可以使用 JavaScript 自带的 URL 类。它可以通过构造函数接收一个 URL 字符串，然后可以访问 URL 的各个组成部分。例如：
const url = new URL('https://www.example.com/path/to/resource?id=123'); console.log(url.protocol); // 输出 https: console.log(url.host); // 输出 www.example.com console.log(url.pathname); // 输出 /path/to/resource console.log(url.searchParams.get('id')); // 输出 123
如果 URL 不合法，则会抛出一个 TypeError。
如何使用 Promise 发送网络请求？
在发送网络请求时，我们可以使用原生的 fetch 方法来发送请求。fetch 方法返回一个 Promise，我们可以使用 then 语句来处理请求的响应结果。例如：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
在这个例子中，我们使用了 fetch 方法向服务器发送了一个 GET 请求，并希望响应内容是 JSON 格式的。当获取到响应内容时，通过 then 语句对响应结果进行处理。如果出现错误，我们将通过 catch 语句捕捉并输出错误信息。
如何将 URL 和 Promise 结合起来使用？
为了更好的利用 Promise，我们可以自定义一个函数，将 URL 和 fetch 的操作结合起来。这样做的好处是简化代码的复杂度，使得代码更加可读。例如，我们可以实现一个名为 fetchJson(url) 的函数，它的作用是从指定的 URL 获取 JSON 数据。示例代码如下：
-- -------------------- ---- ------- -------- -------------- - ------ ---------- -------------- -- - -- -------------- - ----- --- ----------- ------ ------- --------------------- - ------ ---------------- -- ------------ -- ---------------------- - -------------------------------------------------- ---------- -- ------------------ ------------ -- ----------------------展开代码
这个函数包含了对错误响应的处理，当收到非 2xx 的 HTTP 状态码时，将会抛出一个错误。在调用 fetchJson 函数时，我们仍然可以通过 then 和 catch 语句对结果进行处理。
总结
在本文中，我们介绍了如何检查 URL 是否合法，如何使用 Promise 发送网络请求，以及如何将 URL 和 Promise 结合起来使用。通过这些技巧，我们可以编写出更加简洁和可读的代码，提高代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbfc1af6b2d6eab31feab7
