简介
在前端开发中，我们通常需要与远程服务进行交互，从而实现数据的获取和提交等功能。为了方便调用服务接口，我们通常使用一些库或框架，例如 jQuery、axios 或者 fetch 等等。而 @pnp/pnpjs 则提供了一种更加简单、易用、可扩展的解决方案。
@pnp/pnpjs 是一个基于 Promise、async/await 和类断言等 ES6 语言特性开发的库，它提供了访问 SharePoint Online 和 SharePoint 2019 的 API 的封装，支持各种 CRUD 操作，可以让开发者轻松地在 SharePoint 中数据操作。
安装
使用 npm 来安装 @pnp/pnpjs：
npm install @pnp/pnpjs --save
使用
使用起来很简单，只需在模块中导入 @pnp/pnpjs，就可以开始调用它的方法：
import { sp } from "@pnp/pnpjs";
获取列表数据
@pnp/pnpjs 官方文档提供了以下获取列表数据的代码：
sp.web.lists.getByTitle("Tasks").items.get().then((items) => { console.log(items); });
首先，我们使用 sp.web.lists.getByTitle("Tasks") 获取一个名为 "Tasks" 的列表对象，然后我们调用 items.get() 方法来获取该列表中所有的项。最后将返回的数据打印到控制台中。
获取单个列表项
如果我们只希望获取某一个列表中的单个项，可以使用以下代码：
sp.web.lists.getByTitle("Tasks").items.getById(1).get().then((item) => { console.log(item); });
这里，我们使用 sp.web.lists.getByTitle("Tasks") 方法获取的列表对象，再用 items.getById(1) 方法获取 ID 为 1 的列表项，并通过 get() 方法获取该项详细信息。最后将返回的数据打印到控制台中。
创建列表项
使用 @pnp/pnpjs 也可以方便地创建一个 SharePoint 列表项：
-- -------------------- ---- ------- --- ---- - --------------------------------- ---------------- ------ ----- --- ------- --- --------- ---------------- -- - -------------------- ---------------- -- - ------------------- ---展开代码
在这里，我们定义了一个名为 list 的变量，使用 sp.web.lists.getByTitle("Tasks") 获取"Tasks"列表对象。我们调用 items.add() 方法来添加一个名为 "Task 1"，状态为 "In Progress" 的新任务，并通过 then() 方法来获取添加后的结果。
更新列表项
同样，使用 @pnp/pnpjs 可以也方便地更新一个 SharePoint 列表项：
-- -------------------- ---- ------- --- ---- - --------------------------------- ------------------------------ ------ ----- - - --------- ------- ---------- ---------------- -- - -------------------- ---------------- -- - ------------------- ---展开代码
这里，我们再次定义了一个名为 list 的变量，使用 sp.web.lists.getByTitle("Tasks") 获取"Tasks"列表对象。然后使用 items.getById(2) 方法获取 ID 为 2 的列表项，并使用 update() 方法更新该项的标题和状态。最后通过then() 方法获取更新后的结果。
删除列表项
使用 @pnp/pnpjs 可以方便地删除 SharePoint 中的列表项：
let list = sp.web.lists.getByTitle("Tasks"); list.items.getById(2).delete().then(() => { console.log("Deleted successfully"); }).catch((error) => { console.log(error); });
在这里，我们再次使用 sp.web.lists.getByTitle("Tasks") 获取列表对象，并使用 items.getById(2) 方法获取 ID 为 2 的列表项。使用 delete() 方法从 SharePoint 中删除该项。
总结
在这篇文章中，我们学习了如何使用 npm 包 @pnp/pnpjs 操作 SharePoint 存储的列表数据。我们可以轻松地使用它来获取、创建、更新和删除数据，而不需要编写一些底层的 HTTP 请求处理。希望这篇文章能够帮助你更好地掌握 @pnp/pnpjs，使你在开发 SharePoint 系统时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5efb33ce403f2923b035baaa
