前言
对于前端工程师来说，使用一些现有的开源库能够大大提高开发的效率，而在 AngularJS 框架中使用 ngx-resource 就是一种不错的选择。本文将会详细介绍如何使用该 npm 包，并且通过实例代码来帮你理解更加深入。
ngx-resource 是什么？
ngx-resource 是一个 AngularJS 包装的并发性的 Restful 服务套件。与 $ http 对象不同，它基于 $ resource，自动执行增删改查，并且为一系列请求提供拦截和变握。此外它还支持自定义请求参数处理，响应过滤和转化等操作，提供了更方便的 API 调用方式和数据格式化工具。
安装 ngx-resource
确保已安装 node 包管理器，然后通过以下命令安装 ngx-resource：
npm i ngx-resource --save
使用 ngx-resource
首先我们在 app.js 中添加依赖：
let app = angular.module('MyApp', ['xngResource'])在控制器或服务中，我们需要注入 $resource 服务来调用资源。通常定义一个资源变量，然后使用其方法来获取，建立，更新或删除资源。
比如，我们新建一个customers.js 文件, 定义一个名为 Customers 的服务：
app.factory('Customers', ['$resource', function($resource) {
return $resource('/api/customers/:id', { id: '@_id' }, {
update: { method: 'PUT' }
});
}]);此时，我们可以在控制器中使用该服务获取数据，例如：
app.controller('CustomerCtrl', ['$scope', 'Customers', function($scope, Customers) {
$scope.customers = Customers.query();
}]);上述代码将使用 $resource 的 query() 方法来获取 customers 数组，即 Restful API 中Get请求的一种。
如果我们需要执行 POST 操作，将新的 customer 保存到服务器的数据库中，那么代码将会是这样的：
let newCustomer = new Customers(); newCustomer.name = 'Customer name'; newCustomer.age = 30; newCustomer.$save();
还有其他方法，例如： $ remove() 和 $ update()，可以删除和更新资源。
ngx-resource 配置呢？
- 设置基础 URL（都是 Restful Ajax 那套流程）
除了 query() 方法是使用 GET 执行之外，所有其他方法都是使用传统的 HTTP 方法执行操作。默认情况下，这些方法会在 $ resource.url 中工作，并且可以在应用程序启动时配置：
app.factory('MyResource', ['$resource', function($resource) {
return $resource('/api/items/:itemId', { itemId: '@id' });
}]).config(['$resourceProvider', function($resourceProvider) {
$resourceProvider.defaults.stripTrailingSlashes = true; // 默认去除斜线
}]);- 设置请求拦截器
该服务提供了一种可以在发送或接收之前检查或修改请求或响应的方式，这是使用 request 或 response 拦截器。拦截器可以使用 transform 函数更新数据，或者通过取消 Promise 将其拦截。
我们可以配置一个 $ http 服务器级别拦截器来添加一个 JWT 的 Token，“Bearer ” 是遵循 HTTP 规范的标准前缀：
-- -------------------- ---- -------
---------------------------- -------------------- ----------------------- ------------------ -
--- ------ - ----------------
-------------------------------------- -------------------- ------------ ------------------ -
------ -
---------- ---------------- -
-- --------------------------- - --- -
-------------- - -------------- -- ---
--- ----- - ------- - - -----------------------------
---------------------------- - ------
-
------ -------
-
--
----
----我们还可以做其他一些事情，例如在响应中添加消息框，直接显示错误信息等。
- 自定义请求参数
您可以使用默认情况下可以设置的用于请求的自定义 headers / 请求变量，如下所示:
-- -------------------- ---- -------
------------------------- ------------- ------------------- -
------ --------------------------- - --- ----- -- -
------------ -
------- ------
-------- -
------------- ------
------------------ -----
--
------- -
---- ------
---- -----
-
-
---
----我们还可以将查询参数直接添加到参数中，以使整个请求简化为：
let params = {
key1: 'value1',
key2: 'value2'
};
let obj = MyResource.get(params);- 自定义响应
我们还可以添加转换器来更改响应格式，例如自定义 back-end 的 RESTful API 返回的结果类型（例如：our API 需要返回 {total：x，items：[]})。
-- -------------------- ---- -------
---------------------------- ----------------------- -
-------------------------------------------------------------------- -
-- -------------- -
-- -------- -- ------------- -
------ -------------
-
---- -
------ -
------ --
------ --------------
--
-
-
---
----结论
ngx-resource 提供了一个更好的 AngularJS Restful Web 服务。它可以便于前端工程师进行 RESTful Ajax 操作，并提供了自定义请求参数功能，请求拦截器，响应过滤和转化等功能，开发过程中提供了更友好的 API 调用方式。希望本篇文章能够给大家提供有用的指导和学习。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b5881e8991b448e550d