跳转到内容

网络请求

应用网络请求是应用一项核心且不可或缺的功能。以往,开发者们常常借助浏览器原生的 XMLHttpRequest(xhr)或者 fetch API 来实现网络请求。然而,使用这些原生方法时,开发者需要手动处理诸多复杂琐碎的情况,诸如认证信息的携带、请求参数的精准序列化等。

为了让开发者摆脱这些繁琐操作,在网络请求的海洋中能够更加高效、顺畅地航行,iBizHUB 内置了网络请求服务与 Mqtt 服务,为网络请求管理带来全新的便捷体验。

网络请求服务

在 iBizHUB 中,网络请求服务基于功能强大的 axios 库进行封装。axios 作为一款基于 Promise 的网络请求库,极大地简化了异步请求的发送与响应处理流程,让开发者能更高效地与后端进行数据交互。

值得一提的是,该服务不仅集成了 axios 的优势,还独具匠心地内置了请求等待队列。这一巧妙设计能有效避免短时间内发起的重复请求,大幅减少不必要的数据传输,进而为网络带宽资源的合理利用贡献力量。

在实际应用中,网络请求服务在 iBizHUB 生态里扮演着关键角色,主要负责实体级别的数据交互,如数据的增加、删除、修改和查询,同时也承担着应用级数据交互的重要任务。

使用方式

在 iBizHUB 里,考虑到多应用协同工作的特性,网络请求服务并非全局唯一实例。为了高效处理不同应用的接口请求,iBizHUB 为每个应用都配备了独立的网络请求实例。这些实例各自拥有对应的 baseUrl,该 baseUrl 融合了请求根路径与应用标识,会在请求时默认附加到请求 url 前面,能够精准对接各应用专属的 API 服务。

若要获取网络请求服务,可通过以下两种方式实现:

方式baseUrl说明场景
iBizHUB请求根路径 + 默认应用标识获取全局的请求服务处理应用级数据的交互
App请求根路径 + 应用标识获取应用的请求服务处理应用的实体数据交互
js
// 获取全局的请求服务
ibiz.net;
js
// 获取应用实例
const app = ibiz.hub.getApp(this.context.srfappid);
// 获取应用的请求服务
app.net;

常规方法

网络请求服务对常见的网络请求方法进行了系统化封装,涵盖了如 get、post、put、delete 等 HTTP 标准方法。这些方法的 url 遵循 RESTful 规范,极大提升了接口的规范性与可维护性。借助这样的封装,开发者能够更加便捷、高效地发起网络请求。该请求服务主要包含以下常规方法:

方法名称参数说明
get(url: string, params?: IParams, headers?: RawAxiosRequestHeaders, option?: AxiosRequestConfig)Get 请求
post(url: string, data: IData, params?: IParams, headers?: RawAxiosRequestHeaders)Post 请求
put(url: string, data: IData, params?: IParams, headers?: RawAxiosRequestHeaders) Put 请求
delete(url: string, params?: IParams, headers?: RawAxiosRequestHeaders)Delete 请求
request(url: string, config?: AxiosRequestConfig)基础请求方法
axios(config: AxiosRequestConfig<IData>)创建标准 axios 请求,不会携带默认的 baseUrl
js
// 获取应用实例
const app = ibiz.hub.getApp(this.context.srfappid);
// 触发 Get 请求, psdataentities和psdevslnsys为数据类别,psdataentityid和psdevslnsysid为数据标识,url可多层嵌套
app.net.get("psdataentities/:psdataentityid", params, headers);
app.net.get(
  "/psdevslnsys/:psdevslnsysid/psdataentities/:psdataentityid",
  params,
  headers
);
// 触发 Post 请求
app.net.post("psdataentities", data, params, headers);
app.net.post(
  "/psdevslnsys/:psdevslnsysid/psdataentities",
  data,
  params,
  headers
);
// 触发 Put 请求
app.net.put("psdataentities/:psdataentityid", data, params, headers);
app.net.put(
  "/psdevslnsys/:psdevslnsysid/psdataentities/:psdataentityid",
  data,
  params,
  headers
);
// 触发 Delete 请求
app.net.delete("psdataentities/:psdataentityid", data, params, headers);
app.net.delete(
  "/psdevslnsys/:psdevslnsysid/psdataentities/:psdataentityid",
  data,
  params,
  headers
);
// 触发基础请求方法, url可不遵循 RESTful 规范
ibiz.net.request(url, {
  method,
  data,
  params,
  headers,
});
// 触发标准 axios 请求,不会携带默认的 baseUrl
ibiz.net.axios({
  method,
  headers,
  url,
});

拦截器

在 iBizHUB 中,网络请求服务对 axios 拦截器进行了深度且精妙的扩展。这一强大特性让开发者能根据千变万化的业务需求,随心所欲地注入各类拦截器。

无论是在请求之前,还是在响应返回之后,开发者都能凭借这些拦截器编织出贴合业务场景的定制化处理逻辑,实现对网络请求的精细化管理。

网络请求服务默认拦截器内置了自动附加标准请求头信息的机制。如认证令牌(Token)这类关乎系统安全的关键信息,在每一次请求中都会被自动添加到请求头里。若要添加或删除自定义拦截器,可按以下方式操作:

js
// 自定义拦截器,需继承内部预置的Interceptor基类
class CustomInterceptor extends Interceptor {
  // 请求之前处理
  async onBeforeRequest(config) {
    // 自定义拦截器逻辑
  }

  // 请求失败之后处理
  async onRequestError(error) {
    // 自定义拦截器逻辑
  }

  // 响应成功之后处理
  async onResponseSuccess(config) {
    // 自定义拦截器逻辑
  }

  // 响应失败之后处理
  async onResponseError(error) {
    // 自定义拦截器逻辑
  }
}
// 添加自定义拦截器,ID参数为自定义拦截器标识
ibiz.net.addInterceptor("ID", new CustomInterceptor());
// 删除自定义拦截器,ID参数为自定义拦截器标识
ibiz.net.removeInterceptor("ID");

SSE

在 iBizHUB 的网络交互生态里,网络请求服务的功能远不止于常规的网络请求。它还支持借助 Server-Sent Events(SSE)这一技术,让客户端能够实时获取服务器推送的消息。

SSE 作为一种基于 HTTP 协议的单向通信机制,打破了传统请求 - 响应模式的局限,赋予服务器主动向客户端发送实时数据的能力。在 iBizHUB 系统内部,SSE 被应用于 AI 助手的消息推送场景,确保用户能够及时、高效地接收来自 AI 助手的各类信息,极大地提升了交互的实时性与流畅度。SSE 的使用方式如下:

js
// 触发 sse 请求, signal参数是用于取消请求的信号对象
ibiz.net.sse(url, params, {
  headers,
  body,
  onmessage: () => {
    // 处理消息
  },
  onclose: () => {
    // 处理连接关闭
  },
  onerror: () => {
    // 处理错误
  },
  signal,
});

Mqtt 服务

在 iBizHUB 系统内部,除了网络请求服务外,还提供了 Mqtt 服务,它借助 WebSocket(WS)技术实现数据的实时交互。WebSocket 作为一种基于 TCP 协议的双向通信机制,能在客户端和服务器之间建立起持久稳定的连接,为实时数据传输提供了高效可靠的通道。

Mqtt 服务在 iBizHUB 里扮演着关键角色,广泛应用于多个重要场景,比如异步操作通知,能及时告知用户操作结果;console 控制台的日志输出,方便开发者实时监控系统状态;以及设计工具的协同操作通知,助力团队成员高效协作。

若要订阅 Mqtt 服务消息,可以采用以下方式:

js
// 订阅 Mqtt 服务消息
ibiz.hub.mqtt.evt.on("message", (topic, msg) => {
  // 处理消息
});

// 也可以通过消息中心订阅 Mqtt 服务消息。iBizHUB 内部默认会将 Mqtt 消息转发到消息中心
ibiz.mc.command.change.on((msg) => {
  // 处理消息
});
未来已来,立即拥抱应用融合的力量
Released under the MIT License.