npm 包 prejs 使用教程

prejs 是一个基于 Promise 实现的轻量级前端数据预处理工具库，可以帮助开发者优雅处理异步数据。在前端数据处理中，异步数据转同步是一项常见的操作，prejs 将处理这类操作变得异常简单。

安装

从 npm 上安装 prejs 最新版：

npm i prejs

也可以从官方仓库下载源代码手动引入：

git clone git@github.com:prejs-pre/prejs.git

快速入门

使用 prejs 仅需三步：

1. 引入 prejs：

const prejs = require('prejs');

1. 传递异步数据：

const asyncData = fetch('/api/data');

1. 使用 prejs 预处理异步数据：

prejs(asyncData)
  .then(result => console.log(result))
  .catch(err => console.error(err));

API

prejs 提供了 prejs() 静态方法来处理异步数据，这个方法只有一个参数，传入需要处理的异步数据。

prejs(asyncData)

在 prejs() 方法中，还可以使用以下方法进行数据预处理：

prejs.map()

对异步数据进行 map 映射操作。

prejs(asyncData).map(data => data.map(item => item));

prejs.filter()

对异步数据进行过滤操作。

prejs(asyncData).filter(data => data.filter(item => item.deleted === false));

prejs.reduce()

对异步数据进行 reduce 操作。

prejs(asyncData).reduce(data => data.reduce((acc, val) => acc + val));

prejs.find()

返回异步数据中第一个符合条件的元素。

prejs(asyncData).find(data => data.id === 1);

prejs.findIndex()

返回异步数据中第一个符合条件的元素下标。

prejs(asyncData).findIndex(data => data.id === 1);

prejs.flatten()

将异步数据扁平化。

prejs(asyncData).flatten(data => data);

prejs.if() 和 prejs.else()

对异步数据进行条件判断。

prejs(asyncData)
  .if(data => data.length === 0)
  .then(() => console.log('empty data'))
  .else(() => console.log('data is not empty'));

示例代码

-- -------------------- ---- -------
----- ----- - -----------------

------------------
  -------------- -- ----------------
  ---------- -- -----------
    --------- -- ------------- -- ------
    ------------ -- ---------------- -- ------------ --- -------
    ------------ -- ----------------- ---- -- --- - -----
    ---------- -- ------- --- --
    --------------- -- ------- --- --
    ------------- -- -----
    -------- -- ----------- --- --
    -------- -- ------------------ -------
    -------- -- ----------------- -- --- --------
    ---------- -- -------------------
  -
  ---------- -- --------------------

总之，prejs 为前端处理异步数据提供了一种优雅简洁的解决方案，使用时不仅能提高开发效率，同时也能提升代码的可读性与维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ead81e8991b448dc2ac