使用Fetch GET请求设置查询字符串

在使用 Fetch API 进行 GET 请求时，查询字符串是附加在 URL 之后，通过问号（?）开始，多个参数之间通过和号（&）分隔。下面是一个使用 Fetch API 发送 GET 请求，并且设置查询字符串的步骤示例：

假设我们需要从一个API获取一些用户数据，API的基本URL是 https://api.example.com/users，我们需要根据用户的年龄和国籍来过滤这些用户数据。

步骤 1：构建 URL 和查询字符串

首先，我们需要构造一个包含查询参数的 URL。假设要查询年龄为 30 岁的美国用户，我们可以这样写：

javascript
const baseUrl = 'https://api.example.com/users';
const queryParams = new URLSearchParams({
    age: 30,
    nationality: 'USA'
});
const url = `${baseUrl}?${queryParams.toString()}`;

这里，URLSearchParams 对象用于方便地构建查询字符串。通过调用 toString() 方法，它会自动将参数对象转换为适合 URL 的格式。

步骤 2：使用 Fetch 发送 GET 请求

现在 URL 已经包含了我们需要的查询参数，接下来就是使用 Fetch API 发送 GET 请求：

javascript
fetch(url)
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Data retrieved:', data);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

在这段代码中，fetch(url) 发起了一个网络请求到指定的带查询字符串的 URL。.then(...) 链处理了响应，首先检查响应是否成功，然后将响应的 JSON 内容解析出来，最后在控制台打印或处理错误。

总结

通过这种方式，你可以灵活地使用 Fetch API 发送带查询参数的 GET 请求，来获取或过滤你需要的数据。这种方法在处理 RESTful API 时尤其有用，可以根据需求动态构建查询字符串。