@varlet/axle 0.2.8 → 0.2.9

package/README.md

@@ -197,6 +197,80 @@ axle.setHeader('TOKEN', TOKEN)
 axle.removeHeader('TOKEN')
 ```
 
+## Built-in interceptor
+
+axle provides some practical requests/response interceptors, and is compatible with `axle` and `axios`.
+
+### axios
+
+```ts
+import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
+
+const headersInterceptor = requestHeadersInterceptor({
+  headers: () => ({
+    token: localStorage.getItem('token'),
+    'Axle-Custom-Header': 'Axle-Custom-Header',
+  })
+})
+
+const retryInterceptor = responseRetryInterceptor({ count: 3 })
+
+axios.interceptors.request.use(
+  headersInterceptor.onFulfilled, 
+  headersInterceptor.onRejected, 
+  headersInterceptor.options
+)
+axios.interceptors.response.use(
+  retryInterceptor.onFulfilled,
+  retryInterceptor.onRejected, 
+  retryInterceptor.options
+)
+```
+
+### axle
+
+```ts
+import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
+
+axle.useRequestInterceptor(
+  requestHeadersInterceptor({
+    headers: () => ({
+      token: localStorage.getItem('token'),
+      'Axle-Custom-Header': 'Axle-Custom-Header',
+    }),
+  }),
+)
+
+axle.useResponseInterceptor(responseRetryInterceptor({ count: 3 }))
+```
+
+### General parameter of the interceptor
+
+Each built-in interceptor supports `include` `exclude` `axiosInterceptorOptions (same with Axios interceptor)`.
+
+#### include & exclude
+
+It is used to request filtering to determine what request should apply the interceptor and support specifying the `method` or `glob` syntax. The usage method is as follows.
+
+```ts
+axle.useResponseInterceptor(
+  responseRetryInterceptor({ 
+    count: 3,
+    include: ['method:put', 'method:post'],
+    exclude: ['/system/**', '/user/addUser']
+  }),
+)
+```
+
+### List of built-in interceptor
+
+| Name | Description |
+| --- | --- |
+| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestHeadersInterceptor.ts) | Used to customize the request header |
+| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseRetryInterceptor.ts) | Used to realize the request abnormal retry |
+| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseBlobInterceptor.ts) | Used to intercept blob type |
+| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseTimeoutInterceptor.ts) | Used to abnormal timeout |
+
 ## Vue Composition API
 
 Axle provides the usage of Vue Composition API style, which encapsulates the `loading status`, `error status`, `upload and download progress` of the request, `return data`, `lifecycle`, etc., And inherit all the configuration of `axios`.

package/README.zh-CN.md

@@ -197,6 +197,80 @@ axle.setHeader('TOKEN', TOKEN)
 axle.removeHeader('TOKEN')
 ```
 
+## 内置拦截器
+
+Axle 提供了一些实用的请求/响应拦截器，并且兼容 axle 和 axios。
+
+### axios
+
+```ts
+import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
+
+const headersInterceptor = requestHeadersInterceptor({
+  headers: () => ({
+    token: localStorage.getItem('token'),
+    'Axle-Custom-Header': 'Axle-Custom-Header',
+  })
+})
+
+const retryInterceptor = responseRetryInterceptor({ count: 3 })
+
+axios.interceptors.request.use(
+  headersInterceptor.onFulfilled, 
+  headersInterceptor.onRejected, 
+  headersInterceptor.options
+)
+axios.interceptors.response.use(
+  retryInterceptor.onFulfilled,
+  retryInterceptor.onRejected, 
+  retryInterceptor.options
+)
+```
+
+### axle
+
+```ts
+import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
+
+axle.useRequestInterceptor(
+  requestHeadersInterceptor({
+    headers: () => ({
+      token: localStorage.getItem('token'),
+      'Axle-Custom-Header': 'Axle-Custom-Header',
+    }),
+  }),
+)
+
+axle.useResponseInterceptor(responseRetryInterceptor({ count: 3 }))
+```
+
+### 拦截器通用参数
+
+每个内置拦截器都支持 `include` `exclude` `axiosInterceptorOptions (与 axios 拦截器一致)`。
+
+#### include & exclude
+
+用于请求过滤，以确定什么请求应该应用该拦截器，支持指定 method 或是 glob 语法，使用方式如下。
+
+```ts
+axle.useResponseInterceptor(
+  responseRetryInterceptor({ 
+    count: 3,
+    include: ['method:put', 'method:post'],
+    exclude: ['/system/**', '/user/addUser']
+  }),
+)
+```
+
+### 内置拦截器一览
+
+| 名称 | 描述 |
+| --- | --- |
+| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestHeadersInterceptor.ts) | 用于自定义请求头 |
+| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseRetryInterceptor.ts) | 用于实现请求异常重试 |
+| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseBlobInterceptor.ts) | 用于拦截 blob 类型 |
+| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseTimeoutInterceptor.ts) | 用于归一化超时异常 |
+
 ## Vue 组合式 API
 
 Axle 提供了 Vue Composition API 风格的用法，封装了请求的 `加载状态`, `错误状态`, `请求的上下行进度`，`返回数据`，`生命周期` 等等，并继承了 `axios` 的所有配置。

package/es/index.d.ts

@@ -2,6 +2,9 @@ import { R as RequestInterceptor, a as ResponseInterceptor } from './instance-8e
 export { e as AxleInstance, A as AxleRequestConfig, b as FetchMethod, F as FetchRunner, I as Interceptor, c as ModifyMethod, M as ModifyRunner, d as RunnerMethod, i as createAxle, f as createFetchRunner, g as createModifyRunner, h as download } from './instance-8e68a761.js';
 import { AxiosInterceptorOptions, AxiosResponse } from 'axios';
 
+declare function matchPattern(pattern: string, method: string, url: string): boolean;
+declare function createMatcher(include?: string[], exclude?: string[]): (method: string, url: string) => boolean;
+
 interface RequestHeadersInterceptorOptions {
     headers?: Record<string, string> | (() => Record<string, string>);
     include?: string[];
@@ -34,4 +37,4 @@ interface ResponseRetryInterceptorOptions {
 }
 declare function responseRetryInterceptor(options: ResponseRetryInterceptorOptions): ResponseInterceptor;
 
-export { RequestHeadersInterceptorOptions, RequestInterceptor, ResponseBlobInterceptorOptions, ResponseInterceptor, ResponseRetryInterceptorOptions, ResponseTimeoutInterceptorOptions, requestHeadersInterceptor, responseBlobInterceptor, responseRetryInterceptor, responseTimeoutInterceptor };
+export { RequestHeadersInterceptorOptions, RequestInterceptor, ResponseBlobInterceptorOptions, ResponseInterceptor, ResponseRetryInterceptorOptions, ResponseTimeoutInterceptorOptions, createMatcher, matchPattern, requestHeadersInterceptor, responseBlobInterceptor, responseRetryInterceptor, responseTimeoutInterceptor };

package/es/index.js

@@ -113,9 +113,6 @@ function createAxle(config = {}) {
   };
 }
 
-// src/interceptors/requestHeadersInterceptor.ts
-import { isFunction } from "@varlet/shared";
-
 // src/matcher.ts
 import { minimatch } from "minimatch";
 function matchPattern(pattern, method, url) {
@@ -140,6 +137,7 @@ function createMatcher(include, exclude) {
 }
 
 // src/interceptors/requestHeadersInterceptor.ts
+import { isFunction } from "@varlet/shared";
 function requestHeadersInterceptor(options = {}) {
   const { headers: headersOrGetter } = options;
   return {
@@ -233,8 +231,10 @@ function responseRetryInterceptor(options) {
 export {
   createAxle,
   createFetchRunner,
+  createMatcher,
   createModifyRunner,
   download,
+  matchPattern,
   requestHeadersInterceptor,
   responseBlobInterceptor,
   responseRetryInterceptor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/axle",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Progressive request tool based on axios",
   "type": "module",
   "main": "es/index.js",