16、React 异步数据处理与相关特性解析

React 异步数据处理与相关特性解析

1. 异步请求处理与 GraphQL 引入

在处理异步请求时，当组件未挂载， .then 函数可能会抛出错误，阻止后续 .then 函数执行，转而调用 .catch 函数。 .catch 函数会在调用 setError 前检查组件是否已挂载。虽然我们并未阻止 HTTP 请求本身的发生，但保护了请求解决后对状态的调用。在慢速网络条件下测试应用是个不错的做法，这样可以发现并消除相关的错误。

GraphQL 由 Facebook 设计，与 React 类似，都是声明式的解决方案。React 用于构建用户界面，而 GraphQL 用于与 API 进行通信。当我们进行并行数据请求时，GraphQL 可以一次性获取所需的所有数据。

要从 GraphQL API 获取数据，需要向特定的 URI 发送 HTTP 请求，并附带一个查询。GraphQL 查询是对所需数据的声明式描述，服务会解析该描述并将所需数据打包到一个响应中。

2. GitHub GraphQL API 的使用

要在 React 应用中使用 GraphQL，后端服务需要遵循 GraphQL 规范。GitHub 提供了 GraphQL API，并且有一个 GraphQL Explorer 用于探索 API。使用 Explorer 时，需要使用 GitHub 账户登录。

在 Explorer 的左面板中，可以编写 GraphQL 查询。例如，获取单个 GitHub 用户信息的查询如下：