引言
GraphQL 最大的特点就是优雅、快速、灵活的数据查询方法，不管是在前端还是后端都有着广泛的应用场景。大多数传输协议都有自己的错误处理机制，但是在 HTTPS 协议的情况下，我们很难快速准确地判断错误的原因。在本文中，我们将会介绍 GraphQL 在 HTTPS 协议的情况下的错误处理方法，以及如何处理这些错误。
HTTPS 错误类型
在使用 GraphQL 进行数据查询的时候，如果遇到错误，那么这个错误类型可能有以下几种:
UnauthenticatedError表示当前用户没有权限访问此资源。ValidationError表示请求数据验证出错，比如传入的参数不符合要求。ParsingError表示 GraphQL 解析查询语句失败，可能是语法错误或数据库出现问题等。ServerError表示服务器内部错误，可能是数据库出现了问题等。NetworkError表示网络出现了错误，比如 HTTPS 协议错误，网络不稳定等。
HTTPS 错误处理方法
如果在 HTTPS 协议的情况下遇到了错误，前端可以根据错误类型进行不同的错误处理方法。
UnauthenticatedError
当遇到 UnauthenticatedError 时，可以采用以下两种错误处理方法:
- 即时跳转到登录页面
- 显示”无访问权限“提示
下面是第一种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- -------- - ----- ------------------ -
-------- -
---------------- ------- - - ---------------
--------------- ------------------
--
------- -----
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
-- ----- --------------------
-------------------- - ---------
-
- ----- ------- -
---------------------
-
-下面是第二种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- -------- - ----- ------------------ -
-------- -
---------------- ------- - - ---------------
--------------- ------------------
--
------- -----
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
-- ----- --------------------
---------------------
-
- ----- ------- -
---------------------
-
-ValidationError
当遇到 ValidationError 时，可以采用以下两种错误处理方法:
- 验证错误提示
- 更改输入框提示颜色或者边框颜色
下面是第一种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
----- ----------- - -
-------- -
-
---------------- ---------------- -
---------
-
-
-
--
--- -
----- -------- - ----- ----------------- -
-------- -
--------------- ------------------
--
------- -------
----- ---------------------------
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- ---- - ----- ----------------
-- ------------- -
----- ----- - ---------------
-- ---------------------- --- ---------------------------- -
-- ----- ---------------
---------------------
-
-
--------------------
-
- ----- ------- -
---------------------
-
-下面是第二种实现方法的示例代码:
fieldset:invalid {
border-color: red;
}<form>
<fieldset>
<input type="text" required />
<button type="submit">Submit</button>
</fieldset>
</form>ParsingError
当遇到 ParsingError 时，可以采用以下两种错误处理方法:
- 显示错误提示
- 在控制台中输出错误信息
下面是第一种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
----- ----------- - -
-
---------------- ------------- -
---------
-
-
--
--- -
----- -------- - ----- ----------------- -
-------- -
--------------- ------------------
--
------- -------
----- ---------------------------
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- ---- - ----- ----------------
--------------------
-- ------------- -
----- ----- - ---------------
---------------------
-
-
- ----- ------- -
---------------------
-
-下面是第二种实现方法的示例代码:
-- -------------------- ---- -------
-------- ----------------------- -
---------------------
-
-------- ------------------ -
---------------------
-
----- -------- ------------- -
----- ----------- - -
-
---------
-
--
--- -
----- -------- - ----- ----------------- -
-------- -
--------------- ------------------
--
------- -------
----- ---------------------------
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- ---- - ----- ----------------
-- ------------- -
----- ----- - ---------------
-- ---------------------- --- ----------------------- -
------------------------
- ---- -
-------------------
-
-
--------------------
-
- ----- ------- -
---------------------
-
-ServerError
当遇到 ServerError 时，可以采用以下两种错误处理方法:
- 显示错误提示
- 控制台输出错误信息
下面是第一种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- -------- - ----- ---------------------- -
------- ------
------------ --------------
-------- -
--------------- ------------------
-
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- ---- - ----- ----------------
-- ------------- -
----- ----- - ---------------
---------------------
-
-
- ----- ------- -
---------------------
-
-下面是第二种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- -------- - ----- ---------------------- -
------- ------
------------ --------------
-------- -
--------------- ------------------
-
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- ---- - ----- ----------------
--------------------
-- ------------- -
----- ----- - ---------------
-- ---------------------- --- ------------------------ -
---------------------
-
-
-
- ----- ------- -
---------------------
-
-NetworkError
当遇到 NetworkError 时, 需要先排除一些与接口无关的问题，比如网络连接异常等。如果确定是接口本身出现了问题，那么可以采用以下两种错误处理方法:
- 显示错误提示
- 控制台输出错误信息
下面是第一种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- -------- - ----- ---------------------- -
------- ------
------------ --------------
-------- -
--------------- ------------------
-
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- ---- - ----- ----------------
-- ------------- -
----- ----- - ---------------
---------------------
-
-
- ----- ------- -
---------------------
-- ----- ------------
-----------------------
-
-下面是第二种实现方法的示例代码:
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- -------- - ----- ---------------------- -
------- ------
------------ --------------
-------- -
--------------- ------------------
-
---
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- ---- - ----- ----------------
--------------------
-- ------------- -
----- ----- - ---------------
-- ---------------------- --- ---------------- -
---------------------
-
-
-----------------------
-
- ----- ------- -
---------------------
-----------------------
-
-结论
在使用 GraphQL 进行数据查询时，最常见的错误类型有 UnauthenticatedError，ValidationError，ParsingError，ServerError 和 NetworkError。在 HTTPS 协议的情况下处理这些错 误，可以采用不同的错误处理方法来进行处理。实际上, 针对不同的错误类型可以采用多种方法来处理，根据具体情况进行选择即可。总之, 前端程序员需要对应用场景和需求合理选择错误处理方法，来保持应用的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770fe576d66e0f9aacae7e6