docs: support inteceptors docs

README.md

@@ -266,11 +266,11 @@ axle.useResponseInterceptor(
 
 | Name | Description |
 | --- | --- |
-| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestHeadersInterceptor.ts) | Used to customize the request header |
-| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestMockInterceptor.ts) | Used to mock data |
-| [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 |
+| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/requestHeadersInterceptor.md) | Used to customize the request header |
+| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/requestMockInterceptor.md) | Used to mock data |
+| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/responseRetryInterceptor.md) | Used to realize the request abnormal retry |
+| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/responseBlobInterceptor.md) | Used to intercept blob type |
+| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/responseTimeoutInterceptor.md) | Used to abnormal timeout |
 
 ## Vue Composition API
 

README.zh-CN.md

@@ -266,11 +266,11 @@ axle.useResponseInterceptor(
 
 | 名称 | 描述 |
 | --- | --- |
-| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestHeadersInterceptor.ts) | 用于自定义请求头 |
-| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestMockInterceptor.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) | 用于归一化超时异常 |
+| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/requestHeadersInterceptor.md) | 用于自定义请求头 |
+| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/requestMockInterceptor.md) | 用于模拟数据 |
+| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/responseRetryInterceptor.md) | 用于实现请求异常重试 |
+| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/responseBlobInterceptor.md) | 用于拦截 blob 类型 |
+| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/examples/responseTimeoutInterceptor.md) | 用于归一化超时异常 |
 
 ## Vue 组合式 API
 

src/interceptors/examples/requestHeadersInterceptor.md

@@ -0,0 +1,40 @@
+# Request Headers Interceptor
+
+```js
+import { createAxle, requestHeadersInterceptor } from '@varlet/axle'
+
+const axle = createAxle()
+
+axle.useRequestInterceptor(
+  requestHeadersInterceptor({
+		// additional headers carried by the request
+    headers: {
+      'Custom-Field': 'custom-field'
+    },
+
+		// optional filtering options that determine whether the interceptor intercepts
+    include: ['method:get', 'method:post'],
+    exclude: ['/user/**'],
+  })
+)
+```
+
+```js
+import { createAxle, requestHeadersInterceptor } from '@varlet/axle'
+
+const axle = createAxle()
+
+axle.useRequestInterceptor(
+  requestHeadersInterceptor({
+		// headers can also be a getter
+    headers: () => ({
+      'Authorization': localStorage.getItem('token'),
+      'Custom-Field': 'custom-field',
+    }),
+
+		// optional filtering options that determine whether the interceptor intercepts
+    include: ['method:get', 'method:post'],
+    exclude: ['/user/**'],
+  })
+)
+```

src/interceptors/examples/requestMockInterceptor.md

@@ -0,0 +1,48 @@
+# Request Mock Interceptor
+
+```js
+import { createAxle, requestMockInterceptor } from '@varlet/axle'
+
+const axle = createAxle()
+
+axle.useRequestInterceptor(
+  requestMockInterceptor({
+    // url and handler mapping
+    mapping: {
+      '/user/getUsers': {
+        // request delay time (ms)
+        delay: 1000,
+        handler: () => ({
+          data: {
+            code: 200,
+            data: [
+              {
+                id: 1,
+                name: 'Mock Jack Ma',
+              },
+              {
+                id: 2,
+                name: 'Mock Tom',
+              },
+            ],
+            message: 'success',
+          },
+        }),
+      },
+
+      '/error/**': {
+        delay: 1000,
+        handler: () => ({
+          // status defaults 200
+          status: 500,
+          data: null
+        }),
+      }
+    },
+
+    // optional filtering options that determine whether the interceptor intercepts
+    include: ['method:get', 'method:post'],
+    exclude: ['/user/**'],
+  })
+)
+```

src/interceptors/examples/responseBlobInterceptor.md

@@ -0,0 +1,25 @@
+# Response Blob Interceptor
+
+```js
+import { createAxle, responseBlobInterceptor } from '@varlet/axle'
+
+const axle = createAxle()
+
+axle.useResponseInterceptor(
+  responseBlobInterceptor({
+    // transform blob to normal response type
+    onResponse: (response) => ({
+      ...response,
+      data: {
+        code: 200,
+        data: response.data,
+        message: 'success',
+      }
+    }),
+
+    // optional filtering options that determine whether the interceptor intercepts
+    include: ['method:get', 'method:post'],
+    exclude: ['/user/**'],
+  })
+)
+```

src/interceptors/examples/responseRetryInterceptor.md

@@ -0,0 +1,18 @@
+# Response Retry Interceptor
+
+```js
+import { createAxle, responseRetryInterceptor } from '@varlet/axle'
+
+const axle = createAxle()
+
+axle.useResponseInterceptor(
+  responseRetryInterceptor({
+    // retry count
+    count: 3,
+
+    // optional filtering options that determine whether the interceptor intercepts
+    include: ['method:get', 'method:post'],
+    exclude: ['/user/**'],
+  })
+)
+```

src/interceptors/examples/responseTimeoutInterceptor.md

@@ -0,0 +1,33 @@
+# Response Timeout Interceptor
+
+```js
+import { createAxle, responseTimeoutInterceptor } from '@varlet/axle'
+
+const axle = createAxle()
+
+axle.useResponseInterceptor(
+  // normalize the timeout error code to TIMEOUT
+  responseTimeoutInterceptor({
+    // optional filtering options that determine whether the interceptor intercepts
+    include: ['method:get', 'method:post'],
+    exclude: ['/user/**'],
+  })
+)
+```
+
+```js
+import { createAxle, responseTimeoutInterceptor } from '@varlet/axle'
+
+const axle = createAxle()
+
+axle.useResponseInterceptor(
+  // custom error code
+  responseTimeoutInterceptor({
+    normalizeErrorCode: 'CUSTOM',
+
+    // optional filtering options that determine whether the interceptor intercepts
+    include: ['method:get', 'method:post'],
+    exclude: ['/user/**'],
+  })
+)
+```