Jiess文档

Appearance

加载器 ​

@jiess/http/loading是用于对请求状态监听的功能模块

Loading组件的控制

调用接口时，经常需要在界面展示loding效果，以便与用户形成良好的交互体验；

本模块用于监听接口的状态，根据该状态可及时的反馈到页面的Loading组件中

准备工作 ​

使用包管理器，安装依赖

bash
# 安装工具模块
npm i @jiess/http -S
# -------------------------------------------------

# 引入未经babel转化的版本（体积小，建议高版本项目中使用）
import JiessLoading from '@jiess/http/loading';

# 引入babel转化的版本（体积大，建议低版本项目中使用）
import JiessLoading from '@jiess/http/umd/JiessLoading.babel.js';

使用cdn引入js库

bash
# 引入未经babel转化的版本（体积小，建议高版本项目中使用）
<script src="//cdn.jsdelivr.net/npm/@jiess/http/umd/JiessLoading.js"></script>

# 引入babel转化的版本（体积大，建议低版本项目中使用）
<script src="//cdn.jsdelivr.net/npm/@jiess/http/umd/JiessLoading.babel.js"></script>

使用cdn引入后，会在全局挂载名为JiessLoading的实例对象

上手使用 ​

使用加载器首先需要在拦截器中进行拦截处理，然后才能驱动监听器

拦截处理 ​

  • 在请求拦截器中，拦截请求参数，并通知匹配的loading监听器（加载中状态）
js
export function requestFunc(config) {
  JiessLoading.response(config);
	// ...
}
  • 在响应拦截器中，拦截响应参数，并通知匹配的loading监听器（加载完毕状态）
js
export function responseSuccessFunc({ config }) {
  JiessLoading.response(config);
	// ...
}

如何匹配 ​

上例中，请求拦截器和响应拦截器的config均为请求配置对象；基于该对象， 可得到该接口特征标识，通过与监听过程的特征标识进行匹配，从而驱动监听器

在config参数对象中，含有两个关键属性：

  • mainURL

我们常将服务器地址单独拧出来定义为baseURL，以应对多环境切换的需求； 这里的mainURL属性则是接口的主体地址（不一定含参数部分，未做控制）

最终请求时需将两者拼接，完整接口地址=baseURL+mainURL

  • method 即HTTP请求的方法

监听Loading ​

JiessLoading是一个构造函数，使用时需传入三个必要参数

name ​

  • 类型 String
  • 必要 true
  • 详细

加载器在项目中的唯一标识，字符串类型

tags ​

  • 类型 []
  • 必要 true
  • 详细

由资源请求特征标识（字符串类型）构成的数组，loading会根据该标识， 准确的识别发起请求的接口，并监听状态

注：若由多个特征标识构成，则所有接口完成加载，再反馈状态

callback ​

  • 类型 Function
  • 形参 (boo: boolean)
  • 必要 true
  • 详细

callback为回调函数，用于及时反馈资源请求的状态

  • boo为ture：资源加载中
  • boo为false：资源加载完毕

根据该状态，可以及时更新Loading组件，在页面呈现最新的loading状态

使用示例 ​

实例化JiessLoading，并按如下规则传入参数：

js
new JiessLoading(namespace,[特征标识1,特征标识2],callback);
  • namespace：当前Loading在项目中的唯一标识（字符串）
  • 特征标识数组：一个或多个接口的特征标识所构成的数组
  • callback：实时观察接口请求状态，并实时做出反馈

使用@jiess/http构建的接口，会自动为每个接口分配特征标识

namespace

namespace发生重复时，后定义的监听器会覆盖前者；如果仅根据状态进行简单的UI操作， 我们仅需保证同一页面内的namespace不重复即可

对于简单的接口监听，甚至直接使用接口特征标识作为namespace

js
// 监听user模块下list列表接口的加载状态
new JiessLoading(userApi.listKey, [userApi.listKey], boo => {
	// 响应式更新加载组件的状态
	spinning.value = boo;
});

注：页面中并发调用同一个接口时，首参标识会重复，需要更换具有唯一性的首参标识