npm 包 sarlacc-angular-client 使用教程-JavaScript中文网-JavaScript教程资源分享门户

1. 简介

sarlacc-angular-client 是一个可用于 Angular 网站开发的 npm 包。它基于 Angular HTTP Client 封装，提供了方便的 API，使你能够轻松地与 sarlacc 后端进行沟通。

2. 安装

要开始使用 sarlacc-angular-client，你需要在你的项目中引入它：

npm install --save sarlacc-angular-client

3. 用法

3.1 导入

在你的模块中导入 sarlacc-angular-client：

-- -------------------- ---- -------
------ - -------------------------- - ---- -------------------------

-----------
  -------- -
    ------------------------------------
      -------- -------------------------------
      --------------- ----------------
      --------------------- ----
    --
  -
--
------ ----- --------- - -

baseUrl - 你的 sarlacc 后端地址
tokenHeaderKey - 存在请求 header 中的 token key，默认为 Authorization
checkTokenExpiration - 是否在发送请求前检查 token 是否过期，默认为 true

3.2 服务

在你的组件中导入服务并使用它：

-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------

------------
  --------- --------------
  ------------ --------------------------
--
------ ----- ---------------- ---------- ------ -
  ------------------- ------------ ------------------- --

  ---------- --

  -- ----- ----------- -- ---
-

SarlaccDataService - 这个服务是一个基础的服务，它包含了一些基础方法，比如 GET、POST、PUT、DELETE 等。

API 详解：

GET(url: string, options?: SarlaccApiOptions): Observable<any> - 执行 GET 请求并返回一个可观察对象，options 参数是可选的。
POST(url: string, data: any, options?: SarlaccApiOptions): Observable<any> - 执行 POST 请求并返回一个可观察对象，data 参数是请求体的数据，options 参数是可选的。
PUT(url: string, data: any, options?: SarlaccApiOptions): Observable<any> - 执行 PUT 请求并返回一个可观察对象，data 参数是请求体的数据，options 参数是可选的。
DELETE(url: string, options?: SarlaccApiOptions): Observable<any> - 执行 DELETE 请求并返回一个可观察对象，options 参数是可选的。

3.2.1 sarlaccOptions

以上所有的 API 方法均可以接收一个可选的 sarlaccOptions 参数。该参数用于定制 SarlaccApiOptions，如下：

interface SarlaccApiOptions {
    maxRetries?: number;
    timeout?: number;
    skipToken?: boolean;
}

maxRetries - 当前请求发送失败后，在发起一次请求前的最大重试次数。
timeout - 该请求的超时时间（毫秒）。
skipToken - 如果设置为 true，则不发送 Authorization 头部信息。

3.3 身份验证

sarlacc-angular-client 对身份验证的处理默认是将 token 存储在本地的 localStorage 中，并在每次请求中添加一个标准的 authorization header。在服务中添加了一些处理 token 过期的方法，并在服务初始化时检查 token 是否过期。如果 token 已过期，则重新尝试获取 token。

以下是一些能够处理身份验证的方法：

3.3.1 `getToken()`

这个方法会返回当前存储在本地的 token。

-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------

------------
  --------- --------------
  ------------ --------------------------
--
------ ----- ---------------- ---------- ------ -
  ------------------- ------------ ------------------- --

  ---------- -
    -----------------------------------------
  -
-

3.3.2 `setToken(token: string)`

这个方法保存给定的 token 值到本地。

-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------

------------
  --------- --------------
  ------------ --------------------------
--
------ ----- ---------------- ---------- ------ -
  ------------------- ------------ ------------------- --

  ---------- -
    --------------------------------------
  -
-

3.3.3 `login(username: string, password: string): Observable<any>`

这个方法发送 POST 请求获取 token 并将它保存在本地。

-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------

------------
  --------- --------------
  ------------ --------------------------
--
------ ----- ---------------- ---------- ------ -
  ------------------- ------------ ------------------- --

  ---------- -
    ------------------------------------- --------------------------- -- -
      -- ----
    ---
  -
-

3.3.4 `logout()`

这个方法会清除当前存储在本地的 token。

-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------

------------
  --------- --------------
  ------------ --------------------------
--
------ ----- ---------------- ---------- ------ -
  ------------------- ------------ ------------------- --

  ---------- -
    --------------------------
  -
-

3.4 示例

这里给出了一个使用 sarlacc-angular-client 的例子。它获取一些数据并在成功获取数据后在控制台中打印出来。首先，我们定义了一个模型，接着，在组件中获取数据并对其进行处理：

-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------

--------- ----------- -
  --- -------
  ----- -------
-

-----------------
------ ----- ---------------- ---------- ------ -
  ----- ----------- - -----

  ------------------- ------------ ------------------- --

  ---------- -
    --------- - -----
    ---------------
  -

  --------- -
    --------------------------------------------------------
      ----- -- -
        --------- - ----
        -----------------------
      --
      ----- -- -
        -----------------
      -
    --
  -
-

在这个例子中，我们首先定义了一个 ExampleData 接口表示我们需要获取的数据结构。接着，在组件中调用 GET 方法获取数据，并根据请求成功或失败，在控制台中打印出日志。在这个例子中，我们使用 subscribe 方法以异步方式获取数据。如果希望使用更多的 RxJS 运算符来处理数据，可以查看官方的 RxJS 文档。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055b8881e8991b448d927b

npm 包 sarlacc-angular-client 使用教程