使用 Fetch API 发送 GET 请求是一种常见的网络请求方式。本章节将详细介绍如何使用 Fetch API 来发送 GET 请求，并展示一些实际应用中的例子。
基础 GET 请求
发送一个基础的 GET 请求非常简单。你需要做的只是调用 fetch() 方法并传入相应的 URL。Fetch API 返回一个 Promise，该 Promise 在请求成功时解析为响应对象。以下是一个简单的示例：
-- -------------------- ---- -------
-------------------------------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
---------- -- ------------------
------------ -- -------------------- --- ---- - ------- ---- ---- ----- ------------ --------上述代码首先调用 fetch() 函数来发起一个 GET 请求到指定的 URL。然后，通过 .then() 方法处理响应对象。如果响应状态不是 OK（例如，404 或 500），则会抛出一个错误。最后，我们使用 .json() 方法将响应体解析为 JSON 格式，并打印结果。如果有任何错误发生，则会捕获并打印到控制台。
设置请求头
有时，你可能需要设置自定义的 HTTP 头信息。例如，为了验证身份或传递额外的元数据，你可以通过第二个参数传递一个配置对象。以下是如何设置请求头的例子：
-- -------------------- ---- -------
------------------------------------- -
------- ------
-------- -
---------------- ------- -------------------
--------------- ------------------
-
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------- --------在这个例子中，我们设置了 Authorization 和 Content-Type 头信息。注意，对于 GET 请求，method 应该被明确设置为 'GET'，尽管这是默认值。
使用查询字符串
在某些情况下，你可能希望在 URL 中添加查询字符串来过滤或排序数据。Fetch API 可以很容易地处理这种情况。只需在 URL 后面添加查询字符串即可：
const url = 'https://api.example.com/data?sort=asc&limit=10';
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));这个例子展示了如何通过 URL 直接添加查询参数。这些参数将作为 GET 请求的一部分发送给服务器。
处理跨域请求
当你的前端应用和服务端 API 不在同一域名下时，你可能会遇到跨域资源共享 (CORS) 的问题。为了确保跨域请求能够正常工作，服务器端需要正确配置 CORS 头信息。从客户端的角度来看，处理跨域请求与普通的 GET 请求几乎相同：
fetch('https://api.otherdomain.com/data', {
method: 'GET',
mode: 'cors' // 确保使用 CORS 模式
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));在此示例中，mode: 'cors' 参数告诉浏览器允许进行跨域请求。请注意，服务器端也需要支持和正确配置 CORS。
错误处理
虽然 Fetch API 提供了强大的功能，但错误处理是不可忽视的一部分。由于网络请求总是存在失败的可能性，因此应该始终包含适当的错误处理逻辑。除了检查响应状态外，还可以捕获其他类型的错误，如网络超时或 DNS 解析失败：
-- -------------------- ---- -------
-------------------------------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
---------- -- ------------------
------------ -- -
-- ----------- --- ------------- -
-------------------- -----------
- ---- -
-------------------- -------- -------
-
---此示例展示了如何根据错误类型输出不同的消息。这对于调试和提供用户友好的错误信息非常有用。
通过以上介绍，你应该对如何使用 Fetch API 发送 GET 请求有了全面的了解。无论是基本的 GET 请求还是更复杂的场景，Fetch API 都提供了足够的灵活性和功能来满足需求。