简介
@jonathanking/react-relay-network-layer 是一个用于构建基于 React.js 和 Relay 的前端应用的 npm 包。它提供了一种灵活的方式来配置与 Relay 的网络层相关的请求和响应拦截器，从而轻松地实现缓存、错误处理、请求记录等功能。
安装
在项目中使用 npm 包管理器来安装该包。
npm install @jonathanking/react-relay-network-layer --save
使用
建立一个网络层
首先，我们需要使用 RelayNetworkLayer 类来建立一个网络层。这个网络层是在 Relay 中发起请求和接收响应的入口。RelayNetworkLayer 的构造函数接收一个参数，是一个包含许多配置选项的对象。下面是一个最小的配置对象示例：
import { RelayNetworkLayer } from '@jonathanking/react-relay-network-layer';
const network = new RelayNetworkLayer();这份配置对象中我们只传递了一个空对象，用来在默认情况下创建 RelayNetworkLayer 实例。接下来我们需要将这个网络层与我们的应用进行关联。
关联网络层
我们通过在 Relay 的 Environment 实例中设置 network 属性来关联我们的网络层。比如：
import Relay from 'react-relay';
import { RelayNetworkLayer } from '@jonathanking/react-relay-network-layer';
const network = new RelayNetworkLayer();
Relay.injectNetworkLayer(network);这样，我们的网络层就已经与我们的应用实例关联上，可以发送请求了。但是这时我们是没有任何拦截器配置的，默认情况下只能发出普通的 HTTP 请求，而没有缓存、请求记录、错误处理等功能。接下来，让我们来看一下如何配置网络层。
配置网络层
网络层的配置需要提供一个带有许多选项的 JS 对象，下面是一个完整的选项列表：
-- -------------------- ---- ------- - -- ---------------------------- -- ----------- ------------ ----------- -- ------- ------ -- ------- ----------- ------------ ------- -- ----------------- -- ----- --- - --- - ------ - ----- ------ ------- ------ -- ------------- ------- ----- ------------ -- ---------------------------------- -- --------- --------------------------- ------ -- ------ ------------------- --------------- ---------------------- --------------------- -- ---------------- -- --------------------------- -- ---- -------------- - ----------- ---- -- ------------- -------------------- -------------------- -- ---------------- -- --------------------------- -- ---- -------------- - ----------- ---- -- ------------- ------------------ ------------------ -- ------------- ------- ----- ------------ -- ---- ------------------- ------------- -- ---------------------------------- ------------------- ------------------ -- ------ ----------- ----------- ------------ --------------- -
接下来我们可以根据需要来配置不同的拦截器进行网络请求的拦截。
配置缓存
缓存是一项非常有用的功能，可以提高应用的响应速度。@jonathanking/react-relay-network-layer 支持对请求结果进行缓存。下面是一份配置缓存的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------------
------ - ----------------- - ---- ------------------------------------------
------ - -------------- - ---- ----------------------------------
----- ------- - --- -------------------
------ -
---- ------ ------- -- -
----- ---------- - -----------------------------
------ ---------- - ---------------------- - -----
--
---- ------ ------- ----- --------------- -- -
---------------------------- ----------------------
--
------- ------ ------- -- -
--------------------------------
-
--
---
----- --------- - --- ------------------
--------------------------------------------
----- ----------- - --- --------------------
----------------------------------------
---------------------------------------这里我们使用 sessionStorage 来存储缓存数据。我们需要传递一个拥有 get / set / delete 方法的对象作为缓存配置的参数。
配置请求拦截器
在该阶段，我们需要对请求进行拦截，这主要是为了实现请求的记录、取消、错误处理等功能。下面是一个实现记录请求的示例代码：
const network = new RelayNetworkLayer({
requestMiddleware: (req, fetch) => {
console.log(`Requesting ${req.name}...`);
return fetch(req);
}
});这里我们提供了一个自定义的 requestMiddleware 中间件，在发送请求前实现了请求的记录功能。每当我们发送一个请求时，它就会在控制台上显示请求名字。
配置响应拦截器
在该阶段，我们需要对响应进行拦截，这主要是为了实现错误处理、返回结果的重组、缓存结果等功能。下面是一个实现错误处理的示例代码：
-- -------------------- ---- -------
----- ------- - --- -------------------
----------------- -
------ -- ----- -- -
-- --------- -
----------------------- ------ ------------- --------------------
-
------ ----------
-
-
---错误中间件需要返回一个新的 Promise，而不是旧的 Promise。当响应对象的状态码不是 2xx 时，我们将错误呈现在控制台中。
总结
这篇文章介绍了如何使用 @jonathanking/react-relay-network-layer 这个 npm 包来构建一个可配置、可拦截、带有缓存的网络请求层。通过学习本文，您可以了解到如何配置和使用不同的拦截器来发挥其功能。同时，我们也提供了一些示例代码以供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e2442f1