URLSearchParams：构造和发送查询参数的简单方法

在 Web 开发中，我们经常需要向服务器发送查询参数。常规的方法是手动构造查询字符串并将其附加到 URL 中，但这种方法比较繁琐。URLSearchParams 提供了一种更为简单的方式来构造和解析 URL 查询参数。

URLSearchParams 的基本用法

URLSearchParams 是一个内置对象，它提供了一种简单的方式来构造和解析 URL 查询参数。要使用 URLSearchParams，我们首先需要创建一个 URLSearchParams 对象。可以通过 new URLSearchParams() 来创建一个空的 URLSearchParams 对象，然后使用 append() 方法向其中添加查询参数。

const params = new URLSearchParams();
params.append('username', 'John');
params.append('password', '123456');

在这个示例中，我们首先创建了一个空的 URLSearchParams 对象 params，然后使用 append() 方法向其中添加了两个查询参数，分别是 username 和 password。

append() 方法接受两个参数，第一个参数是查询参数的名称，第二个参数是查询参数的值。它可以被调用多次，以便将多个查询参数添加到同一个 URLSearchParams 对象中。

除了使用 append() 方法之外，我们还可以使用 set() 方法来设置查询参数。set() 方法与 append() 方法类似，不同之处在于，如果指定的查询参数已经存在，则先删除它，然后再添加新值。

params.set('password', '654321');

在这个示例中，我们使用 set() 方法将 password 的值从 123456 修改为 654321。

另外，我们还可以通过传入 URL 的查询参数部分来创建 URLSearchParams 对象，这样可以自动将查询参数添加到 URLSearchParams 对象中。

const params = new URLSearchParams('?username=John&password=123456');

在这个示例中，我们使用 new URLSearchParams() 构造函数并传入一个带查询参数的 URL，从而创建一个包含查询参数的 URLSearchParams 对象。

将 URLSearchParams 对象转换为查询字符串

创建 URLSearchParams 对象之后，我们可以将其转换为查询字符串，并将其附加到 URL 中。可以通过 URLSearchParams 对象的 toString() 方法将其转换为查询字符串。

const queryString = params.toString();
const url = `/api/login?${queryString}`;

在这个示例中，我们首先调用了 URLSearchParams 对象的 toString() 方法，将其转换为查询字符串。然后，将查询字符串附加到 URL 中，从而构造了一个带查询参数的 URL。

发送查询参数

构造了带查询参数的 URL 之后，我们可以使用 fetch API 发送查询参数。

使用 fetch API 发送查询参数

使用 fetch API 发送查询参数的方式也非常简单。我们可以使用 fetch 的 GET 方法来发送带查询参数的 URL。

const url = `/api/login?${params.toString()}`;
fetch(url).then(response => {
  return response.json();
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

在这个示例中，我们使用 URLSearchParams 对象的 toString() 方法将其转换为查询字符串，并将其附加到 URL 中。然后，使用 fetch 的 GET 方法发送了一个 GET 请求。在获取响应结果后，我们使用 then() 方法将响应结果转换为 JSON 格式并输出到控制台中。如果请求过程中发生了错误，则使用 catch() 方法捕获并输出错误信息。

URLSearchParams 的常见场景

URLSearchParams 可以被广泛地应用于 Web 开发中的各种场景。下面介绍一些常见的应用场景。

构造 GET 请求的查询参数

当我们需要向服务器发送 GET 请求时，可以使用 URLSearchParams 来构造查询参数。通过 append() 方法，我们可以方便地将多个查询参数添加到 URLSearchParams 对象中。然后，通过 toString() 方法将其转换为查询字符串，并将其附加到 URL 中。最后，使用 fetch API 发送 GET 请求。

const params = new URLSearchParams();
params.append('username', 'John');
params.append('password', '123456');

const url = `/api/login?${params.toString()}`;

fetch(url).then(response => {
  return response.json();
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

在这个示例中，我们构造了两个查询参数，分别是 username 和 password，然后将其转换为查询字符串，并将其附加到 URL 中。最后，使用 fetch API 发送了查询参数，获取了服务器的响应结果。

解析 URL 查询参数

除了构造查询参数之外，URLSearchParams 还可以用于解析 URL 查询参数。可以通过 URLSearchParams 的 get() 方法来获取指定查询参数的值。

const searchParams = new URLSearchParams('?username=John&password=123456');
const username = searchParams.get('username'); // 'John'
const password = searchParams.get('password'); // '123456'

在这个示例中，我们首先创建了一个包含查询参数的 URLSearchParams 对象 searchParams，然后使用 get() 方法分别获取了 username 和 password 查询参数的值。

构造 FormData

在 Web 开发中，我们经常需要向服务器发送表单数据。可以使用 FormData 对象来构造表单数据。URLSearchParams 可以与 FormData 对象一起使用，将查询参数添加到 FormData 中。

const formData = new FormData();
formData.append('username', 'John');
formData.append('password', '123456');

const params = new URLSearchParams();
params.append('token', 'abcdefg');

for (const [key, value] of params) {
  formData.append(key, value);
}

在这个示例中，我们首先创建了一个 FormData 对象 formData，然后使用 append() 方法向其中添加了两个表单项，分别是 username 和 password。接着，我们创建了一个 URLSearchParams 对象 params，并使用 append() 方法向其中添加了一个查询参数 token。最后，我们使用一个 for...of 循环将 params 中的所有查询参数依次添加到 formData 中。

总结

URLSearchParams 是一个用于处理 URL 查询参数的 API。它提供了一系列的方法，可以方便地构造和解析 URL 查询参数。URLSearchParams 可以被广泛地应用于 Web 开发中的各种场景。