weg-resource 是一个方便前端开发者使用 RESTful API 的 npm 包。通过 weg-resource，我们可以以声明式的方式定义并与后端 API 进行交互。本文将介绍如何使用 weg-resource 这个 npm 包，并提供详细的示例代码。
安装
weg-resource 可以通过 npm 安装：
npm install weg-resource
基本使用方法
我们首先需要定义一个 resources 配置对象，该对象包含了访问后端资源的方法。
假设我们有一个名为 posts 的后端资源，其中每篇文章拥有如下属性：id、title、content、createdAt 以及 updatedAt。我们可以定义如下的 resources 对象：
-- -------------------- ---- -------
----- ------------- - ----------
---- -----------------
-------------- - --- ----- --
-------- -
---- - ------- ----- --
------- - ------- ----- --
------- - ------- -------- --
------ - ------- ------ -------- ---- --
------- - ------- ------ --
--
---在这个例子中，我们定义了一个名为 postsResource 的资源对象。通过 url 属性我们指定了它的 URL（绝对或相对），其中 :id 表示占位符，后续具体的 id 值将替换为该参数出现位置的值。比如 /api/posts/1。
接下来让我们看一下这里定义的 actions 对象，它是一个由方法名成员组成的键值对对象。这里我们定义了 5 个方法名成员：
get方法通过 GET 请求获取指定文章内容update方法通过 PUT 请求更新指定文章内容delete方法通过 DELETE 请求删除指定文章内容query方法通过 GET 请求获取文章列表（toArray 默认为 true）create方法通过 POST 请求创建新文章
actions 对象中每个方法定义均提供了一个 method 属性，指定请求该方法所使用的 HTTP 方法。 如果一个方法定义没有提供 isArray 布尔值属性，那么默认情况下 weg-resource 会期望 HTTP 请求结果给出的是单个数据对象，如上面的 get, update, delete，反之，默认给出的应该是一个数组，如上面的 query。 最后，为了让 id 参数默认传到 URL 中，这个默认参数将通过 paramDefaults 属性传递。 这里使用 @id placeholder 将该参数拼接到 url 中。
定义好 resources 后，我们就可以像这样使用 postsResource 了：
-- -------------------- ---- ------- ------------------- --- - ------------------------- ------ - ------------------ --- -------------------------------------------- ------- - ------------------- --- ----- ---- - --- --------------- ------ -------- -------- ------- --- ---------------------------- ------------- - ------------------------- ---
在这个例子中，我们通过 postsResource 对象的 get() 方法，使用 $promise 属性获取 ID 为 1 的文章。query() 方法则获取文章列表，并将结果赋值给 posts。
最后，我们创建了一个新的文章 post，并使用 $create() 方法将其发送到后端。$create() 会发送 POST 请求数据到后端，并且相应地更新本地 $scope 。
常用选项
Resource() 工厂方法支持多种选项。其中一些常用选项如下：
url
指定要访问的资源的 URL。url 可以使用占位符作为变量。我们之前讲解的示例中，:id 就是一个占位符。
paramDefaults
该对象属性指定了在处理调用时使用的默认参数。例如，我们在上面的示例中看到了 id 参数。在此配置中，我们通过 paramDefaults 定义了默认值，所以我们可以在 get() 或其他函数调用中省略传参。如果不省略，则传入的值将替换默认值。
actions
actions 对象定义一组可能执行的函数。可以使用下列 HTTP 方法：GET、POST、PUT、DELETE。world-restangular 使用与 $http 相同的 API 通过无参数的 .get(), .post(), .put(), 或 .delete() 方法调用这些操作。
get(): 基本的获取方法，用于从服务器获取单个数据对象。使用此方法时，设置isArray=true可以获取返回的多条数据。query(): 获取列表，接收参数用于分页或过滤结果。可以使用isArray=false以获取单一对象，或isArray=true以获取多个对象。save(): 保存或创建数据。 根据已存在的数据是否已设置id而区别对待：已存在的数据如果已经设置ID值，则会被视为 update，否则会被视为 create。remove():删除指定数据对象。delete():与.remove()功能相同。
高级用法
我们已经看到了如何定义和使用 resources 对象，现在我们来看看如何在应用程序的生命周期中使用它们。
在应用程序中，resources 对象是常驻内存的，因此一些常见的高级技巧包括：
- 定义一个服务，在应用程序启动时初始化
resources - 在组件中注入
resources - 实现上下文敏感操作
服务初始化
app.service('Posts', function () {
this.resource = new Resource('/api/posts/:postId', { postId: '@id' }, {
query: { method: 'GET', isArray: true },
});
});在这个示例中，我们创建了一个 Posts 服务，该服务包含一个 resource 对象。注意，将 resource 对象设置为服务的属性，而不是作为服务本身。这种处理方式可以让我们在整个应用程序中引用 resource 对象。
于是我们在需要使用 resource 对象时，就可以将 Posts 服务注入到组件中，并使用提供的 resource 属性。例如：
app.controller('PostController', function (Posts) {
Posts.resource.get({ id: 1 }).$promise.then(function (post) {
console.log(post);
});
});这里我们注入了 Posts 服务，并使用其中的 resource 属性从服务器获取单个数据对象。
注入资源
通过在 $rootScope 上定义 resources，我们可以在整个应用程序中使用它们：
app.run(function ($rootScope, Resource) {
$rootScope.Posts = Resource('/api/posts/:postId', { postId: '@id' });
});现在，我们可以在任何应用程序中的控制器中使用该 Posts 对象：
app.controller('PostController', function ($scope, Posts) {
$scope.post = Posts.get({ id: @id });
$scope.savePost = function () {
$scope.post.$update();
};
});在这个控制器中，我们使用 Posts 从服务器获取文章，并在用户更改文章后使用 $update() 方法将其保存回后端。
上下文敏感操作
有些操作可能需要获取多个资源，例如创建一个新用户记录时需要创建 user 记录并创建相关的 profile 记录。我们可以使用 $promise 等待多个 resources 完成解析：
-- -------------------- ---- ------- ----- ------------ - ------------------------------ - ------- ----- -- ---- ----- --------------- - ------------------------------------- - ------- ----- -- ---- ----- ------- - --- -------------- --------- ------ --- ------------------------------- ------ - ----- ---------- - --- ----------------- ------- ------- --- ------ --------------------- ---------------- --------- - -------------------- --- ---------- --------- ---
在这里，我们使用 $create() 和 $promise 等待 newUser 对象和 newProfile 对象成功创建。新的 profile 对象会带有 newUser 的 id 和 newProfile 自身的 id。我们可以使用 $promise 等待多个 resources 完成解析，并在所有 resources 准备好之后修改本地对象。
总结
weg-resource 是一个优秀的 npm 包，简化了在 JavaScript 前端应用程序中使用 RESTful API 的过程。我们通过声明式定义 resources 对象，可以轻松地管理相关资源，并使用它们的多个方法从服务器获取、更新和删除数据。本文提供了详细的 resources 配置和使用示例，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde68