乐闻世界logo
搜索文章和话题

Setting query string using Fetch GET request

7 个月前提问
5 个月前修改
浏览次数33

1个答案

1

在使用 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 时尤其有用,可以根据需求动态构建查询字符串。

2024年7月12日 14:15 回复

你的答案