From 155da4ac41935d4914e2307b2d1bb37f5ac6f3a9 Mon Sep 17 00:00:00 2001 From: Josp3r Date: Tue, 7 May 2024 03:37:10 +0000 Subject: [PATCH] deploy: 86eaf3282b7f9b6360ce8f7e89e8e1d4674cc3fc --- 404.html | 2 +- guide/advance/abort-request.html | 2 +- guide/advance/get-response.html | 2 +- guide/advance/intro.html | 2 +- guide/advance/modify-res-data.html | 2 +- guide/advance/response-type.html | 2 +- guide/advance/return-res-data.html | 2 +- guide/advance/set-default-headers.html | 2 +- guide/advance/set-unify-params.html | 2 +- guide/changelog.html | 2 +- guide/examples.html | 2 +- guide/getting-started.html | 2 +- hashmap.json | 2 +- index.html | 2 +- intro/framework.html | 2 +- intro/middleware.html | 2 +- intro/what-is.html | 2 +- intro/wonder.html | 2 +- reference/interface-middleware-builtin.html | 2 +- reference/interface-middleware-common.html | 2 +- reference/interface-service.html | 2 +- reference/npm-server-fetch.html | 2 +- reference/npm-xhr.html | 2 +- 23 files changed, 23 insertions(+), 23 deletions(-) diff --git a/404.html b/404.html index 8a7d6ff..68961a3 100644 --- a/404.html +++ b/404.html @@ -12,7 +12,7 @@
Skip to content

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
- diff --git a/guide/advance/abort-request.html b/guide/advance/abort-request.html index 395d3e2..93f6cb2 100644 --- a/guide/advance/abort-request.html +++ b/guide/advance/abort-request.html @@ -51,7 +51,7 @@ await next() } } - diff --git a/guide/advance/get-response.html b/guide/advance/get-response.html index 0d7ce51..d6f12f1 100644 --- a/guide/advance/get-response.html +++ b/guide/advance/get-response.html @@ -34,7 +34,7 @@ .catch((err) => { console.log(err) }) - diff --git a/guide/advance/intro.html b/guide/advance/intro.html index 164105d..a302a4f 100644 --- a/guide/advance/intro.html +++ b/guide/advance/intro.html @@ -15,7 +15,7 @@
- diff --git a/guide/advance/modify-res-data.html b/guide/advance/modify-res-data.html index 1d7be18..2b25f33 100644 --- a/guide/advance/modify-res-data.html +++ b/guide/advance/modify-res-data.html @@ -99,7 +99,7 @@ .catch((err) => { console.log(err) }) - diff --git a/guide/advance/response-type.html b/guide/advance/response-type.html index 448837f..89815b9 100644 --- a/guide/advance/response-type.html +++ b/guide/advance/response-type.html @@ -32,7 +32,7 @@ .catch((err) => { console.log(err) }) - diff --git a/guide/advance/return-res-data.html b/guide/advance/return-res-data.html index 44b03ca..4dd2ab6 100644 --- a/guide/advance/return-res-data.html +++ b/guide/advance/return-res-data.html @@ -45,7 +45,7 @@ .catch((err) => { console.log(err) }) - diff --git a/guide/advance/set-default-headers.html b/guide/advance/set-default-headers.html index 618bd90..8609293 100644 --- a/guide/advance/set-default-headers.html +++ b/guide/advance/set-default-headers.html @@ -38,7 +38,7 @@ } } ]) - diff --git a/guide/advance/set-unify-params.html b/guide/advance/set-unify-params.html index d86d6bf..d7cdef8 100644 --- a/guide/advance/set-unify-params.html +++ b/guide/advance/set-unify-params.html @@ -77,7 +77,7 @@ }) }, } - diff --git a/guide/changelog.html b/guide/changelog.html index a9c67cd..7290d04 100644 --- a/guide/changelog.html +++ b/guide/changelog.html @@ -15,7 +15,7 @@
Skip to content
On this page

CHANGELOG

[v1.0.0-rc.7] - 2024-04-18

Added

  • Bundle update

[v1.0.0-rc.6] - 2024-03-19

Added

  • Types update

Fixed

  • AssembleCtrl compose bug

[v1.0.0-rc.1] - 2024-01-11

Added

  • Release RC version
- diff --git a/guide/examples.html b/guide/examples.html index 5364ee4..531424a 100644 --- a/guide/examples.html +++ b/guide/examples.html @@ -105,7 +105,7 @@ .catch((err) => { console.log(err) }) - diff --git a/guide/getting-started.html b/guide/getting-started.html index 2cc132f..4140ff6 100644 --- a/guide/getting-started.html +++ b/guide/getting-started.html @@ -73,7 +73,7 @@ // 对于http-svc相关的npm包,我们默认都是esm格式,因此如果有依赖额外的公共中间件npm包,理论上都需要在这儿增加 ], }

Polyfill

如果您的项目需要在一些低版本(兼容性较差)的环境运行,建议做以下polyfill

shell
npm install --save abortcontroller-polyfill
js
import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'

因为node环境我们要结合node-fetch发起请求,可以使用@http-svc/server-fetch,请参考该中间件的文档

其依赖的AbortController可以使用下列方式引入

shell
npm install --save abortcontroller-polyfill
js
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
- diff --git a/hashmap.json b/hashmap.json index 96325d4..9e413d6 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"guide_changelog.md":"6fdb3fc6","index.md":"f40ab15c","guide_examples.md":"f73927d6","reference_interface-middleware-common.md":"eef472ba","guide_advance_return-res-data.md":"0f53354b","guide_advance_response-type.md":"111ac51d","guide_advance_intro.md":"d196cbd6","guide_advance_modify-res-data.md":"d84d3732","reference_interface-middleware-builtin.md":"055805ca","intro_middleware.md":"df62b2a1","guide_getting-started.md":"319d170a","guide_advance_set-default-headers.md":"601aff54","guide_advance_get-response.md":"59983eff","intro_wonder.md":"47b835d3","reference_npm-server-fetch.md":"77905c07","reference_npm-xhr.md":"6c551628","reference_interface-service.md":"aeb19a6c","intro_framework.md":"82a18f91","guide_advance_abort-request.md":"4fed5130","guide_advance_set-unify-params.md":"3033ec3e","intro_what-is.md":"2be87586"} +{"guide_advance_set-unify-params.md":"3033ec3e","guide_advance_return-res-data.md":"0f53354b","reference_interface-middleware-common.md":"eef472ba","guide_advance_get-response.md":"59983eff","intro_framework.md":"82a18f91","reference_interface-middleware-builtin.md":"055805ca","intro_middleware.md":"df62b2a1","index.md":"f40ab15c","guide_changelog.md":"6fdb3fc6","guide_advance_abort-request.md":"4fed5130","guide_getting-started.md":"319d170a","guide_advance_set-default-headers.md":"601aff54","reference_npm-server-fetch.md":"77905c07","guide_advance_response-type.md":"111ac51d","guide_advance_modify-res-data.md":"d84d3732","intro_what-is.md":"2be87586","guide_advance_intro.md":"d196cbd6","reference_npm-xhr.md":"6c551628","intro_wonder.md":"47b835d3","guide_examples.md":"f73927d6","reference_interface-service.md":"aeb19a6c"} diff --git a/index.html b/index.html index 1536293..8b1454f 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
Skip to content

HTTP Service

一个基于中间件的请求库

标准化,易扩展,支持浏览器与Node.js

🏭

专注于中间件

只需要通过注册中间件来组织您的请求过程

🔧

拓展集成

拓展与集成属于您的自定义中间件

性能出众

基于现代浏览器API,体积精简,按需使用

- diff --git a/intro/framework.html b/intro/framework.html index 6ef7ffb..e55af46 100644 --- a/intro/framework.html +++ b/intro/framework.html @@ -19,7 +19,7 @@ await next() console.log('[MIDDLEWARE_NAME]request after') }
Try it!
Retry
Init Context
Res Data
Body
Timeout
Fetch

设计过程

语言特点
前端JS(TS)/Node偏灵活,动态
后端Go/Java偏稳固,静态

在注册能力上,后端选择在服务启动时一次性初始化所有插件/中间件, 我们选择保留前端业务灵活、语言动态的特点

因此我们有两个允许:

  1. 允许用户在发起请求时,携带该次请求所需要的临时中间件
  2. 允许中间件内部依赖按需加载

例如:

  1. 可以在需要进行风控验证的接口请求时携带风控验证中间件
  2. 风控验证中间件所依赖的验证SDK可以先不进行初始化,实际触发时再去加载执行

除了以上,我们也要遵守几个原则:

  1. 对一个模块下的公共能力尽量进行最大范围的全局初始化
  2. 每个实例要有明显的使用划分,避免混用,有条件的全局使用一个实例(也取决于前端应用的场景,请灵活决策)

模型图

HTTP Service 的洋葱模型

洋葱模型

KOA 的洋葱模型

洋葱模型

- diff --git a/intro/middleware.html b/intro/middleware.html index 2219488..e4a1089 100644 --- a/intro/middleware.html +++ b/intro/middleware.html @@ -57,7 +57,7 @@ ctx.request.params.newKey = 'test' await next() }

附内置中间件参考:内置中间件

- diff --git a/intro/what-is.html b/intro/what-is.html index 2407106..0aa71c6 100644 --- a/intro/what-is.html +++ b/intro/what-is.html @@ -15,7 +15,7 @@
Skip to content
On this page

HTTP Service 是什么 概念介绍

HTTP Service(HTTP服务),是一个可以用于Web前端 CSR(客户端渲染)以及 SSR(服务端渲染)场景下统一的HTTP Request SDK,我们通常称其为请求库或者统一请求库

其设计模式主要借鉴于服务端框架的 middleware 模式,如koa,在发起请求部分,我们保留了 Axios 用户发起请求的习惯。

在发起请求的部分,我们遵循 WHATWG Fetch 规范,使用 Fetch API 作为发起请求中间件的内核,于是在现代浏览器中,你可以在不使用任何 polyfill 的情况下使用 HTTP Service。当然我们也为旧版浏览器提供了 polyfill 方案以及为NodeJS用户提供了服务端的使用方案。

通过使用 HTTP Service,你可以通过装配中间件的方式来优雅地组织逻辑发起HTTP请求。

想直接使用? 前往 开始上手.

能力对比

  • XMLHttpRequest VS Fetch
特点XMLHttpRequestfetch API
语法使用回调函数处理异步请求基于 Promise,支持 async/await
流式传输不支持支持流式传输(例如可以逐步读取响应体)⭐️
监控请求进度支持⭐️不支持
错误处理只在网络故障或请求被阻止时抛出异常默认不会因 HTTP 错误状态而抛出异常
请求/响应格式支持文本和二进制数据支持多种格式,包括 JSON、文本、FormData、Blob 等⭐️
浏览器支持在所有主流浏览器中广泛支持在现代浏览器中支持,但不支持旧版浏览器
Service Worker不支持支持⭐️
中止请求通过 abort() 方法使用 AbortController
控制重定向不支持支持⭐️
信任策略默认发送带有凭据的请求(如 cookies)默认不包含凭据,但可以配置⭐️
活跃度停止维护不断迭代⭐️

相比XHR,我们为请求库提供了监控请求进度适配方案,详见 监控请求进度中间件

  • 多种SDK横向对比
PackageBundle SizeExtensibilityBrowser Compatibility
Axios☁️☁️☁️🔧🔧⭐️⭐️⭐️
Fetch+polyfill☁️+☁️☁️🔧⭐️⭐️+⭐️
HTTP Service☁️☁️+☁️🔧🔧🔧⭐️⭐️⭐️

体积方面:

  • Axios 31KB | 11KB(gzipped)
  • Fetch 0K(Modern Browser or NodeJS v18+) | Polyfill 8.8K | 3K(gzipped)
  • HTTP Service 22KB | 13KB(gzipped) | 20K(With Fetch Polyfill) ✅

Tips:上为请求服务最基本的package size,不含各项扩展能力

拓展性方面:

  • Axios 提供了 Interceptors(拦截器)作为主要干预请求前后的能力
  • Fetch 是一个底层库,主要作为基础请求能力来进行封装
  • HTTP Service 基于链式调用中间件(类似插件形式),灵活,拓展性强 ✅

浏览器兼容性方面:

  • Axios 已经稳定运行多年,兼容性良好
  • Fetch 在较老的浏览器上没有支持,因此业务引入的时候需要考虑polyfill
  • HTTP Service 基于Fetch协议,面向未来,同时可以根据项目运行环境按需引入polyfill,从而使兼容性无需担忧 ✅

致谢

感谢以下项目,它们的设计和实现为HTTP Service的开发提供了宝贵的参考:

  • axios:承载了众多HTTP请求处理的优秀实践,在API层面,我们充分考虑到前端领域中 Axios 的影响,因此也保留了一些Axios用户的使用习惯。
  • koa:现代的Web框架,其中间件架构为我们的设计提供了灵感。
  • vitepress:本文档站点由 VitePress 驱动。
  • wonder:如果您阅读到了这里,非常感谢您的耐心,这里有一个精心准备的异想,希望能对您有所帮助。
- diff --git a/intro/wonder.html b/intro/wonder.html index 43abcd2..3e0506a 100644 --- a/intro/wonder.html +++ b/intro/wonder.html @@ -15,7 +15,7 @@
- diff --git a/reference/interface-middleware-builtin.html b/reference/interface-middleware-builtin.html index 1b856b6..dc22755 100644 --- a/reference/interface-middleware-builtin.html +++ b/reference/interface-middleware-builtin.html @@ -40,7 +40,7 @@ // 重试前的回调 onRetry?: IRetryCallback } - diff --git a/reference/interface-middleware-common.html b/reference/interface-middleware-common.html index 04a4953..0ee64d9 100644 --- a/reference/interface-middleware-common.html +++ b/reference/interface-middleware-common.html @@ -15,7 +15,7 @@
Skip to content
On this page

公共中间件

这些中间件大多源自业务中那些高度复用的逻辑而形成,如接口上报、服务端渲染、接口验签、风控等,您可以根据具体的业务、技术场景自由选择。

当然,您也可以根据自己的业务需求,开发自定义的中间件,具体开发方式和经典案例中的自定义fetch中间件 类似。

公共中间件和内置中间件无任何关联。

- diff --git a/reference/interface-service.html b/reference/interface-service.html index 09a2d1d..2566f5d 100644 --- a/reference/interface-service.html +++ b/reference/interface-service.html @@ -223,7 +223,7 @@ }) }) .request(cfg1) - diff --git a/reference/npm-server-fetch.html b/reference/npm-server-fetch.html index 682b93b..39102dd 100644 --- a/reference/npm-server-fetch.html +++ b/reference/npm-server-fetch.html @@ -20,7 +20,7 @@ const httpSvc = new HttpService({ fetch: new HttpSvcServerFetch() }) - diff --git a/reference/npm-xhr.html b/reference/npm-xhr.html index 05af833..b57cb4f 100644 --- a/reference/npm-xhr.html +++ b/reference/npm-xhr.html @@ -44,7 +44,7 @@ // 生命钩子,在xhr 创建完毕后 onCreated?: (xhr: XHRHttpRequest) => void } -