前言
在前端开发中，我们经常使用 GraphQL 和 Apollo Client 来进行数据的请求和处理。在请求过程中，可能会出现一些错误，例如网络错误、服务器返回错误等等，这时候我们需要对这些错误进行处理，以便更好地提示用户或者进行错误的处理。
在本文中，我们将介绍如何使用 GraphQL 和 Apollo Client 自定义错误信息，以及一些常见的错误处理方法。
GraphQL 和 Apollo Client 简介
GraphQL 是一种用于 API 的查询语言，它可以让客户端精确地请求所需的数据，避免了传统 RESTful API 中的过度获取和过度获取的问题。而 Apollo Client 是一个用于管理 GraphQL 查询的 JavaScript 客户端库，它可以轻松地与 React、Angular、Vue 等前端框架集成。
自定义错误信息
Apollo Client 中的错误处理
在 Apollo Client 中，如果请求发生错误，会返回一个包含错误信息的 Error 对象。我们可以通过 catch 方法来捕获这个错误，并对其进行处理。
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- ----------------
----- ------ - --- --------------
---- ------------------------------
------ --- ---------------
--
--------------
------ ----
----- -
---- -
----
-
-
-
-------------- -- -
----------------------------------
-------------- -- -
--------------------- ------------------
--在上面的代码中，如果请求发生错误，会在控制台输出错误信息。但是这种错误信息对于用户来说并不友好，我们需要对其进行自定义。
自定义错误信息
我们可以通过在 GraphQL 服务器端返回自定义的错误信息，然后在 Apollo Client 中进行处理。在 GraphQL 服务器端，我们可以使用 throw new Error() 抛出一个错误，并在错误信息中返回自定义的信息。
-- -------------------- ---- -------
------ - ------------- --- - ---- ---------------
----- -------- - ----
---- ----- -
----- -----
-
---- ---- -
----- -------
------ -------
---- ----
-
-
----- --------- - -
------ -
----- -- -- -
----- --- --------------
-
-
-
----- ------ - --- -------------- --------- --------- --
----------------------- --- -- -- -
-------------------- ---------------
--在上面的代码中，如果请求 user 查询，会抛出一个错误并返回自定义的错误信息。
在 Apollo Client 中，我们可以通过 onError 方法来捕获这个错误，并对其进行处理。
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- ----------------
----- ------ - --- --------------
---- ------------------------------
------ --- ----------------
-------- ------- -- -
--------------------- ------------------
-
--
--------------
------ ----
----- -
---- -
----
-
-
-
-------------- -- -
----------------------------------
--在上面的代码中，我们通过在 ApolloClient 中传入 onError 方法来捕获错误。如果请求发生错误，会在控制台输出自定义的错误信息。
自定义错误信息的处理方法
在自定义错误信息的处理方法中，我们可以根据错误的类型进行不同的处理。以下是一些常见的错误处理方法。
网络错误处理
在网络错误处理中，我们可以判断错误类型是否为 NetworkError，如果是，则提示用户网络错误并进行重新请求。
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- ----------------
----- ------ - --- --------------
---- ------------------------------
------ --- ----------------
-------- ------- -- -
-- -------------------- -
---------------------- ------ ------------------
-- ---------------
-
-
--
--------------
------ ----
----- -
---- -
----
-
-
-
-------------- -- -
----------------------------------
--在上面的代码中，我们通过判断 error.networkError 是否存在来判断是否为网络错误，并进行相应的处理。
服务器返回错误处理
在服务器返回错误处理中，我们可以判断错误类型是否为 GraphQLError，如果是，则提示用户服务器返回错误并进行相应的处理。
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- ----------------
----- ------ - --- --------------
---- ------------------------------
------ --- ----------------
-------- ------- -- -
-- --------------------- -
---------------------- ------ ------------------
-- -------------------
-
-
--
--------------
------ ----
----- -
---- -
----
-
-
-
-------------- -- -
----------------------------------
--在上面的代码中，我们通过判断 error.graphQLErrors 是否存在来判断是否为服务器返回错误，并进行相应的处理。
总结
通过本文的介绍，我们可以了解到如何使用 GraphQL 和 Apollo Client 自定义错误信息，并进行相应的处理。在实际开发中，我们需要根据不同的错误类型进行不同的处理，以便更好地提示用户或进行错误的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65053f1695b1f8cacd1c1aba