不可否认，RESTful API 已成为现代前端开发中的一项重要技术之一。在使用 RESTful API 构建应用程序时，我们往往需要对复杂的 API 进行调用，并处理返回数据。这往往与前端开发的主要目标——构建用户友好的 UI——相矛盾。幸好，我们可以使用 can-make-rest 这个 npm 包来方便地处理 RESTful API。
什么是 can-make-rest？
can-make-rest 是一个基于 axios 和 canjs 的 npm 包，用于处理 RESTful API。通过将 RESTful API 进行抽象和封装，can-make-rest 让前端开发者可以轻松地与后端 API 进行交互。can-make-rest 的主要功能包括：
- 使用 can-define 和 can-connect 将资源转换为 observables
- 对单个资源、多个资源和分页资源进行查询
- 发送 HTTP 请求并解析响应
- 在客户端进行验证和格式化
安装 can-make-rest
你可以通过以下命令在你的项目中安装 can-make-rest：
npm install can-make-rest --save
之后，你可以使用 ES6 module 在你的代码中引入 can-make-rest：
import CanMakeRest from 'can-make-rest';
现在，你已经成功安装了 can-make-rest，可以将其用于你的项目中。
使用 can-make-rest
使用 can-make-rest 构建前端应用程序的三个基本步骤是：
- 定义 API
- 定义 model
- 使用 can-make-rest 发送和接收数据
定义 API
在使用 can-make-rest 前，我们需要定义我们要调用的 API。can-make-rest 使用类似于 swagger 或 openapi 的规范来定义 API。例如，假设我们要与一个名为 api.example.com 的 API 进行交互并获取名为 users 的资源。以下是我们可以使用的 API 规范：
-- -------------------- ---- -------
----- --- - -
-------- --------
--------- --------------------------
---------- -
-
----- --------
---- --------------
-------- -
---- ----------------- ------
-------- ---
------- ---
------- ---
------- ---
--
--
--
--在这个例子中，我们定义了我们要调用的 API 版本，基本 URL 和名为 users 的资源。在这个资源中，我们定义了可用的 HTTP 方法和可选的参数。其中，我们为 GET 方法启用了缓存，并指定了 URL 中的参数 id。
定义 model
在使用 can-make-rest 前，我们还需要定义我们要使用的 model。can-make-rest 支持将资源转换为可观察的模型。我们可以通过 CanJS 的 can-define 定义我们的模型：
import {DefineMap, DefineList} from 'can';
const User = DefineMap.extend({/*...*/});
const UsersList = DefineList.extend({/*...*/});可以随意定义 User 和 UsersList 中的属性，以与您的 API 资源相对应。
使用 can-make-rest 发送和接收数据
现在，我们已经成功地定义了要调用的 API 和我们要使用的 model。我们需要使用 can-make-rest 发送和接收数据。can-make-rest 为我们提供了一个快捷的方法 makeRest，使用它，我们可以在不编写 HTTP 请求的情况下轻松访问后端 API 并将其数据转换为可观察的 CanJS model。
以下是一个使用 makeRest 方法的示例：
-- -------------------- ---- ------- ------ ---------- ---- ---------------- ----- --- - --- --- ---- ----- ---- - --- --- ---- ----- --------- - --- --- ---- ----- ------ - ------------- ------ ------------ -------------------------------------------- - -------------------------- -- -------- ----- ----- ---
在上面的示例中，我们使用 makeRest 方法创建了一个可用于发送和接收数据的 apiMap 对象。使用这个对象，我们可以向 get 方法传递一个查询对象，并在 Promise 获取数据时得到一个 CanJS model 实例，可以使用 attr 方法检索其属性。
结论
can-make-rest 是一个非常实用的 npm 包，可以帮助前端开发者在应用程序中方便地处理 RESTful API，从而节省大量时间和精力。使用本文中的教程，你可以轻松地开始使用 can-make-rest，并将其应用于你的项目，从而实现快速的开发和构建优秀的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef3161492b5127df986b28d