引言
随着前端项目越来越庞大复杂，前后端分离开发的方式逐渐被广泛采用。在前端领域，为了优化交互体验和提高性能，前端页面应用常常需要大量的数据请求和处理，这也使得前端数据请求成为了应用性能急需优化的点之一。在这样的背景下，falcor-express 这个 npm 包应运而生，它能够有效地优化前端请求数据的方式，提高应用性能，避免过多的网络请求、数据模型转换以及变更的管理。
本篇文章将介绍 falcor-express npm 包的使用方法。
falcor-express 是什么？
falcor-express 是一个能够与 falcor.js 一同使用的 express 中间件包，它支持前端页面应用通过 falcor.js 与应用后端通过单一端点(getModel)请求响应的方式获取数据。在 falcor-express 的帮助下，前端开发者可以像在前端同样地请求数据，并且无需自行处理网络请求和数据管理的问题。
falcor-express 的优势
- 用于前后端分离项目，极大减少了网络请求的数量。
- 支持按需加载，只请求所需数据。
- 在服务器端和客户端之间提供了服务端数据共享机制。
- 支持数据注入，可以在调用端点时注入其他用户的数据。
falcor-express 的使用
以下代码将介绍 falcor-express 的使用方法，我们将从安装 npm 包、设置 express app 到设置 falcor-express 中间件进行介绍。
安装 npm 包
npm install falcor-express --save
引入依赖包
const express = require('express');
const falcorExpress = require('falcor-express');
const Router = require('falcor-router');设置 express app
这是一个用于展示如何配置 express 的简单例子。
-- -------------------- ---- -------
----- --- - ----------
---------------------- -------------------------------------- ----- ---- -
------ --- --------
-
------ -----------
---- -------- -- -
------ - ----- ------------- ------ ------ ------- --
-
-
---
----
-----------------------------
----- ------ - -----------------使用 falcor-express 中间件
接下来，我们将使用 falcorExpress.dataSourceRoute，并将 falcorRouter 作为参数传递给 express app，在 falcorRouter 中设置路由和对应的 mock 数据。
-- -------------------- ---- -------
----- --- - ----------
---------------------- -------------------------------------- ----- ---- -
------ --- --------
-
------ -----------
---- -------- -- -
------ - ----- ------------- ------ ------ ------- --
-
-
---
----
----- ------ - -----------------在以上代码中，我们可获得如下路径 'model.json/greeting'。
Shaping Results
Falcor 中的 PathSet 可以通过数据源中的计算来修改。来看一个例子，例如，我们可以在路由中的路径为 greeting 的 get 的函数中，通过计算，来实现一些动态的返回值。
-- -------------------- ---- -------
---------------------- -------------------------------------- ----- ---- -
------ --- --------
-
------ -----------
---- -------- -- -
------ -
----- -------------
------ ------ -------
--
-
--
-
------ --------
---- -------- -- -
------ -
----- ----------
------ ------ ----------
--
--
---- -------- ----------- --------- -
------ -----------
-
--
-
------ ---------
---- -------- -- -
------ -
----- -----------
------ ---------
--
--
---- -------- ----------- --------- -
------ -----------
-
--
-
------ ------
---- -------- ----------- --------- -
------ -----------
-
-
---
----注意这里含有一个 set 函数，这个是来模拟变更，并且返回一个 callback() 方法。
有关详细信息，请参见路由。
真正地响应请求
当所有路由已经在 falcor-router 中设置好时，falcor-express 将对请求进行匹配和响应。注意，falcor-router 中的代码只是一般的 JavaScript 代码，你可以使用你需要的任何技术并构建一个非常灵活的服务端数据源。
案例
在这个例子中，我们只是简单地使用了一个 router，增加了数据中获取 userId 的可能。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------- - --------------------------
----- ------ - -------------------------
----- --- - ----------
---------------------- -------------------------------------- ----- ---- -
------ --- --------
-
------ -----------
---- -------- -- -
------ -
----- -------------
------ ------ -------
--
-
--
-
------ ------------------------------- ---------
---- -------- --------- -
--- ------------ - -----------
--------------------------
--- ------- - ---
----------------------------- ---- -
--------------
----- --------- --- --------
------ ----- - - --
-- -
----- --------- --- ---------
------ ------ - -- - --------------
---
---
------ --------
-
-
---
----
----- ------ - ---------------- -------- -- -
------------------- --------- -- ---- ---- -----------------------
---例如，当我们使用如下请求：
curl http://localhost:3000/model.json -X POST -H "content-type:application/json" -d '\
{
"method": "get",
"params": [
["greeting", "users", [0, 1], ["email", "name"]]
],
"version": "1.0"
}'我们可以得到如下响应：
-- -------------------- ---- -------
-
------------ -
----------- ------ --------
-------- -
---- -
------- ----- ---
-------- -------------------
--
---- -
------- ----- ---
-------- -------------------
-
-
-
-总结
如果你想为你的前端项目配置一个可扩展的、请求最小化的服务端数据源，在项目中使用 falcor-express 就是一个便捷而好用的方式。通过 falcor-express，你可以提供一个更高效且相对可控的数据服务接口，以使你的前端应用更加流畅且易于升级扩展。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/169177