GraphQL 是一种用于构建 API 的查询语言。与传统的 REST API 不同，GraphQL API 允许客户端明确地说明它们需要获取什么数据，从而减少前端开发人员必须为了获取所需数据而进行多个请求的不必要工作。然而，拥有如此强大的 API 是伴随着一些问题的：其中之一是如何处理可能因为网络或服务器错误而导致的请求超时。
什么是请求超时？
当客户端发送一个请求时，它希望在一定的时间范围内得到一个响应。如果服务器无法在这个时间范围内发送响应，那么客户端可以认为这个请求已经超时了。请求的超时时间可以是互联网连接速度或服务器的处理能力，通常情况下请求超时会导致用户体验变差，因为请求最终没有响应，无法展现数据。
如何处理 GraphQL 请求超时
当 GraphQL 请求超时时，我们需要通知客户端并提高用户体验。以下是一个可以用于处理 GraphQL 请求超时的流程：
1. 设置请求超时时间
GraphQL 客户端应该设置请求超时时间，以确保如果在此时间范围内没有接收到响应，则可以触发请求超时。通常，在网络连接缓慢或服务器繁忙时，我们应该增加超时时间。在 JavaScript 中可以使用以下代码设置超时时间：
----- ------------ - -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ----- ---
-------- ----- -- -- -- -----
--2. 发送请求
使用 GraphQL 客户端发送请求，通常情况下我们使用 fetch API 从 GraphQL 服务器获取数据：
----------------- ------------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
3. 处理请求超时
如果请求超时，我们需要向客户端发送一条请求超时的错误消息。以下是处理请求超时的代码：
----------------- -------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
---------- -- ------------------
------------ -- -
-- ----------- --- ------------- -
--------------------
- ---- -
---------------------
-
---使用 Apollo 处理 GraphQL 请求超时
Apollo 是一个流行的 GraphQL 客户端库，它可以用于处理 GraphQL 请求。在 Apollo 中，当请求超时时，Apollo 可以自动重试请求，直到满足条件为止。以下是使用 Apollo 处理请求超时的代码：
------ - ------------- --------- ------------- - ---- -----------------
----- ------ - --- --------------
------ --- ----------------
----- --- ----------
---- -----------
------
-- ------
------------- -
-------- -----
-
--
---
--------------
------ ----
-
----- -
-----
-
-
-
-------------- -- --------------------
------------ -- ----------------------结论
GraphQL API 在处理请求超时方面与传统的 REST API 相同。然而，GraphQL API 更加灵活和强大，它能直接使用客户端以指定需要的数据。要处理请求超时，我们可以应用一些策略，例如设置请求超时时间和重新发送请求。我们也可以使用 Apollo 这样的流行 GraphQL 客户端库来自动处理请求超时。希望本文可以帮助你更好的理解和处理 GraphQL 中的请求超时问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6720b9732e7021665e03b0ec