From 93b959357fb22a549b24a437c3a09b46c77febc5 Mon Sep 17 00:00:00 2001 From: Josp3r Date: Tue, 7 May 2024 11:36:38 +0000 Subject: [PATCH] deploy: c9fefe8ab33391422e6de8caeebf9544061863ac --- 404.html | 2 +- ....js => guide_advance_set-default-headers.md.2efa8640.js} | 2 +- ...> guide_advance_set-default-headers.md.2efa8640.lean.js} | 0 ...b19a6c.js => reference_interface-service.md.2980ecce.js} | 2 +- ...n.js => reference_interface-service.md.2980ecce.lean.js} | 0 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 | 6 +++--- 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 | 6 +++--- reference/npm-server-fetch.html | 2 +- reference/npm-xhr.html | 2 +- 27 files changed, 29 insertions(+), 29 deletions(-) rename assets/{guide_advance_set-default-headers.md.601aff54.js => guide_advance_set-default-headers.md.2efa8640.js} (97%) rename assets/{guide_advance_set-default-headers.md.601aff54.lean.js => guide_advance_set-default-headers.md.2efa8640.lean.js} (100%) rename assets/{reference_interface-service.md.aeb19a6c.js => reference_interface-service.md.2980ecce.js} (99%) rename assets/{reference_interface-service.md.aeb19a6c.lean.js => reference_interface-service.md.2980ecce.lean.js} (100%) diff --git a/404.html b/404.html index 413d7e9..3b35ac0 100644 --- a/404.html +++ b/404.html @@ -12,7 +12,7 @@
HTTP Service

Appearance

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.
Take me home
- diff --git a/assets/guide_advance_set-default-headers.md.601aff54.js b/assets/guide_advance_set-default-headers.md.2efa8640.js similarity index 97% rename from assets/guide_advance_set-default-headers.md.601aff54.js rename to assets/guide_advance_set-default-headers.md.2efa8640.js index ba46290..cca0a49 100644 --- a/assets/guide_advance_set-default-headers.md.601aff54.js +++ b/assets/guide_advance_set-default-headers.md.2efa8640.js @@ -9,7 +9,7 @@ import{_ as l,B as p,o,c as e,k as a,a as s,G as t,Q as c}from"./chunks/framewor const { method, headers } = ctx.request // 如果是post请求 if (method === 'POST') { - const key = 'Content-Type' // app 安卓端 jsbridge 只认这个headers key,用这个保险 + const key = 'Content-Type' ctx.request.headers = { // assign ...(headers || {}), diff --git a/assets/guide_advance_set-default-headers.md.601aff54.lean.js b/assets/guide_advance_set-default-headers.md.2efa8640.lean.js similarity index 100% rename from assets/guide_advance_set-default-headers.md.601aff54.lean.js rename to assets/guide_advance_set-default-headers.md.2efa8640.lean.js diff --git a/assets/reference_interface-service.md.aeb19a6c.js b/assets/reference_interface-service.md.2980ecce.js similarity index 99% rename from assets/reference_interface-service.md.aeb19a6c.js rename to assets/reference_interface-service.md.2980ecce.js index 1917cfd..e2858af 100644 --- a/assets/reference_interface-service.md.aeb19a6c.js +++ b/assets/reference_interface-service.md.2980ecce.js @@ -19,7 +19,7 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.61af9522.js";const A= interface IFetchConfig { url: string /** - * base URL(host) like '//api.bilibili.com' + * base URL(host) like '//api.domain.com' */ baseURL?: FetchBaseURL /** diff --git a/assets/reference_interface-service.md.aeb19a6c.lean.js b/assets/reference_interface-service.md.2980ecce.lean.js similarity index 100% rename from assets/reference_interface-service.md.aeb19a6c.lean.js rename to assets/reference_interface-service.md.2980ecce.lean.js diff --git a/guide/advance/abort-request.html b/guide/advance/abort-request.html index a556797..ff3c780 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 279fddb..7ccc1ce 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 a35eb99..cd0240b 100644 --- a/guide/advance/intro.html +++ b/guide/advance/intro.html @@ -15,7 +15,7 @@
HTTP Service

Appearance

On this page

自定义调整中间件 操作指南 ​

您可以已通过请求发起前和请求响应后根据具体的情况进行自定义的操作

- diff --git a/guide/advance/modify-res-data.html b/guide/advance/modify-res-data.html index 5d48511..b731b00 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 7a1c8c7..c923741 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 b032dd5..ecb3f48 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 473c4a8..a54e0f8 100644 --- a/guide/advance/set-default-headers.html +++ b/guide/advance/set-default-headers.html @@ -10,7 +10,7 @@ - + @@ -25,7 +25,7 @@ const { method, headers } = ctx.request // 如果是post请求 if (method === 'POST') { - const key = 'Content-Type' // app 安卓端 jsbridge 只认这个headers key,用这个保险 + const key = 'Content-Type' ctx.request.headers = { // assign ...(headers || {}), @@ -38,7 +38,7 @@ } } ]) - diff --git a/guide/advance/set-unify-params.html b/guide/advance/set-unify-params.html index 5db3abf..161d869 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 4c11eac..f88041f 100644 --- a/guide/changelog.html +++ b/guide/changelog.html @@ -15,7 +15,7 @@
HTTP Service

Appearance

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 0e0c587..a09d001 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 64759bc..69dacec 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 22268b3..f433ce7 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"guide_advance_intro.md":"d196cbd6","guide_advance_get-response.md":"59983eff","intro_framework.md":"82a18f91","reference_npm-xhr.md":"6c551628","guide_advance_return-res-data.md":"0f53354b","reference_npm-server-fetch.md":"77905c07","guide_advance_set-unify-params.md":"3033ec3e","intro_middleware.md":"df62b2a1","guide_advance_response-type.md":"111ac51d","reference_interface-middleware-builtin.md":"055805ca","guide_advance_set-default-headers.md":"601aff54","intro_wonder.md":"47b835d3","reference_interface-middleware-common.md":"eef472ba","intro_what-is.md":"2be87586","guide_advance_modify-res-data.md":"d84d3732","guide_changelog.md":"6fdb3fc6","guide_advance_abort-request.md":"4fed5130","guide_getting-started.md":"c0e5a31d","reference_interface-service.md":"aeb19a6c","index.md":"f40ab15c","guide_examples.md":"f73927d6"} +{"guide_changelog.md":"6fdb3fc6","guide_advance_intro.md":"d196cbd6","intro_framework.md":"82a18f91","index.md":"f40ab15c","guide_advance_abort-request.md":"4fed5130","guide_examples.md":"f73927d6","reference_interface-middleware-common.md":"eef472ba","guide_advance_modify-res-data.md":"d84d3732","guide_advance_response-type.md":"111ac51d","intro_wonder.md":"47b835d3","reference_interface-middleware-builtin.md":"055805ca","intro_what-is.md":"2be87586","guide_getting-started.md":"c0e5a31d","guide_advance_set-default-headers.md":"2efa8640","guide_advance_return-res-data.md":"0f53354b","intro_middleware.md":"df62b2a1","guide_advance_set-unify-params.md":"3033ec3e","guide_advance_get-response.md":"59983eff","reference_npm-xhr.md":"6c551628","reference_interface-service.md":"2980ecce","reference_npm-server-fetch.md":"77905c07"} diff --git a/index.html b/index.html index f89dd8b..c21081c 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
HTTP Service

Appearance

HTTP Service

一个基于中间件的请求库

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

开始
在Github上查看
🏭

专注于中间件

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

🔧

拓展集成

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

⚡

性能出众

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

- diff --git a/intro/framework.html b/intro/framework.html index 515185c..12093b2 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 cd9a899..9314c59 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 fb9dfd1..9d58c1e 100644 --- a/intro/what-is.html +++ b/intro/what-is.html @@ -15,7 +15,7 @@
HTTP Service

Appearance

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 4f32754..5ef1dd2 100644 --- a/intro/wonder.html +++ b/intro/wonder.html @@ -15,7 +15,7 @@
HTTP Service

Appearance

On this page

Wonder ​

💡Fetch Done
Retry
InitCtx
ResData
Body
Timeout
- diff --git a/reference/interface-middleware-builtin.html b/reference/interface-middleware-builtin.html index 42ca94a..ec93093 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 b9783c9..b1ed39f 100644 --- a/reference/interface-middleware-common.html +++ b/reference/interface-middleware-common.html @@ -15,7 +15,7 @@
HTTP Service

Appearance

On this page

公共中间件 ​

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

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

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

- diff --git a/reference/interface-service.html b/reference/interface-service.html index 44b4aed..873333e 100644 --- a/reference/interface-service.html +++ b/reference/interface-service.html @@ -10,7 +10,7 @@ - + @@ -35,7 +35,7 @@ interface IFetchConfig { url: string /** - * base URL(host) like '//api.bilibili.com' + * base URL(host) like '//api.domain.com' */ baseURL?: FetchBaseURL /** @@ -223,7 +223,7 @@ }) }) .request(cfg1) - diff --git a/reference/npm-server-fetch.html b/reference/npm-server-fetch.html index 38974aa..07faff7 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 0210b83..ba673f2 100644 --- a/reference/npm-xhr.html +++ b/reference/npm-xhr.html @@ -44,7 +44,7 @@ // 生命钩子，在xhr 创建完毕后 onCreated?: (xhr: XHRHttpRequest) => void } -