介绍
sp-pnpjs-utility 是一个适用于前端开发的 npm 包，用于简化使用 SharePoint PnPjs 操作 SharePoint 的过程。
PnPjs 是 SharePoint 框架的一个核心组件，它允许您通过 JavaScript 开发托管在 SharePoint Online 和 SharePoint On-premise 上的自定义解决方案。使用 PnPjs，您可以编写简洁、高效的代码，轻松地操作 SharePoint 数据，而不需要编写复杂的 CSOM 或 REST API 请求。sp-pnpjs-utility 更进一步简化了这个过程，使得开发者可以更快速、更高效地操作 SharePoint 数据。
安装
您可以通过以下命令来安装 sp-pnpjs-utility：
npm install sp-pnpjs-utility
使用教程
sp-pnpjs-utility 提供了一些实用的函数，用于帮助您更快速地进行 SharePoint 数据的操作。
初始化
在使用 sp-pnpjs-utility 之前，需要先初始化 SharePoint PnPjs。您可以使用以下代码来完成初始化：
-- -------------------- ---- -------
------ - -- - ---- ----------
------ - ----- -- ------- - ---- -------------------
----- ----- - ----- -- -- -
----- ------ - --------------------------------------------------------------
----- -------- - ---------------
-- --- ---------- -----
----------
--- -
-------- -------
--
---
-- --- ----------------
----- -------------------------------------------
--在上面的代码中，我们首先指定 SharePoint 站点的 URL 和要操作的列表名称。然后，我们调用 PnPjs 的 sp.setup() 函数来初始化 SharePoint PnPjs。最后，我们调用 sp-pnpjs-utility 的 setup() 函数来初始化 sp-pnpjs-utility。
获取、创建、更新和删除项目
sp-pnpjs-utility 提供了一些函数，可以帮助您更快速地进行 SharePoint 数据的操作。以下是一些常用的操作：
获取项目
您可以使用以下代码来获取 SharePoint 列表中的项目：
import { getListItems } from "sp-pnpjs-utility";
const getItems = async () => {
const items = await getListItems();
console.log(items);
};getListItems() 函数会返回一个 Promise，该 Promise 的结果是一个表示 SharePoint 列表中所有项目的数组。如果您需要筛选出特定的项目，可以使用以下代码：
const items = await getListItems({
filter: `Title eq 'YourTitle'`,
});getListItems() 函数还可以接受其他参数，例如：
- select: 要返回的字段。
- orderBy: 排序方式。
- top: 要返回的项目数量。
创建项目
您可以使用以下代码来向 SharePoint 列表中创建项目：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
----- ---------- - ----- -- -- -
----- -------- - -
------ ------------
------------ ------------------
--
----- ------ - ----- -------------------------
--------------------
--createListItem() 函数会返回一个 Promise，该 Promise 的结果是一个表示新创建项目的对象。您可以在 itemData 对象中指定要创建的项目的字段。
更新项目
您可以使用以下代码来更新 SharePoint 列表中的项目：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
----- ---------- - ----- -- -- -
----- ------ - --
----- -------- - -
------------ -------------------------
--
----- ------ - ----- ---------------------- ----------
--------------------
--updateListItem() 函数会返回一个 Promise，该 Promise 的结果是一个表示已更新项目的对象。您需要在 itemData 对象中指定要更新的项的字段，并指定要更新的项目的 ID。
删除项目
您可以使用以下代码来从 SharePoint 列表中删除项目：
import { deleteListItem } from "sp-pnpjs-utility";
const deleteItem = async () => {
const itemId = 1;
await deleteListItem(itemId);
};deleteListItem() 函数会返回一个 Promise。您需要指定要删除的项目的 ID。
示例代码
以下是一个完整的示例代码，该代码演示了如何在 SharePoint 列表中执行创建、读取、更新和删除操作，并使用 sp-pnpjs-utility 简化了操作过程：
-- -------------------- ---- -------
------ - -- - ---- ----------
------ - ----- -- -------- ------------- --------------- --------------- -------------- - ---- -------------------
----- ----- - ----- -- -- -
----- ------ - --------------------------------------------------------------
----- -------- - ---------------
-- --- ---------- -----
----------
--- -
-------- -------
--
---
-- --- ----------------
----- -------------------------------------------
--
----- ---- - ----- -- -- -
----- --------
-- ----
----- -------- - -
------ ----- ------
------------ ----- -- - ---- ------
--
----- ----------- - ----- -------------------------
-------------------- ------- -------------
-- ----
----- ----- - ----- ---------------
---------------- -------- -------
-- ----
----- ------ - ---------------
----- --------------- - -
------------ ----- -- -- ------- ---- ------
--
----- ----------- - ----- ---------------------- -----------------
-------------------- ------- -------------
-- ----
----- -----------------------
-------------------- --------
--
-------此代码将在 SharePoint 列表中创建一个名为 "Test Item" 的项目，读取列表的所有项目，更新刚刚创建的项目，并将其删除。
结论
sp-pnpjs-utility 是一个非常实用的 npm 包，它可以大大简化使用 PnPjs 操作 SharePoint 的过程。它提供了许多实用的函数，可以帮助您更快速地进行 SharePoint 数据的操作。本文提供了一个 sp-pnpjs-utility 的使用教程，并提供了示例代码，让您更加深入地了解如何使用它来简化操作。如果您正在开发 SharePoint 相关的解决方案，不妨尝试使用 sp-pnpjs-utility 来加快您的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725481e8991b448e8654