Merge pull request #121 from fatcherjs/docs-readme

docs: add examples for `interceptors`
fanhaoyuan · May 11, 2022 · 7491b38 · 7491b38
2 parents ffc29c0 + 3773dae
commit 7491b38
Show file tree

Hide file tree

Showing 2 changed files with 192 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ fatcher({
 #### createScopedRequest
 
 ```ts
-import { createScopedRequest } from 'fatcher';
+import { createScopedRequest, fatcher, isFatcherError } from 'fatcher';
 import { json } from '@fatcherjs/middleware-json';
 
 const fatcher = createScopedRequest({
@@ -117,7 +117,7 @@ fatcher({
 Inline Options `>` Scoped Options `>` Default Options
 
 ```ts
-import { setDefaultOptions } from 'fatcher';
+import { setDefaultOptions, fatcher, isFatcherError } from 'fatcher';
 import { json } from '@fatcherjs/middleware-json';
 
 setDefaultOptions({
@@ -147,6 +147,100 @@ fatcher({
     });
 ```
 
+### Interceptors
+
+It's actually using a custom Middleware to intercept.
+
+#### Request Interceptor
+
+An example for intercepting request before send.
+
+```ts
+import { Middleware, fatcher, isFatcherError } from 'fatcher';
+
+function requestInterceptor(): Middleware {
+    return {
+        name: 'fatcher-middleware-request-interceptor',
+        use(context, next) {
+            if (!context.payload) {
+                return Promise.reject(new Error('Payload is required.'));
+            }
+
+            if (context.method !== 'POST') {
+                return Promise.reject(new Error('Method is not allowed.'));
+            }
+
+            // check anything from context.
+
+            return next();
+        },
+    };
+}
+
+fatcher({
+    url: '/foo/bar',
+    method: 'POST',
+    middlewares: [requestInterceptor()],
+})
+    .then(response => {
+        // response
+        console.log(response);
+    })
+    .catch(error => {
+        if (isFatcherError(error)) {
+            // handle fatcher error;
+            console.error(error.toJSON());
+            return;
+        }
+        // handle other error
+        console.error(error);
+    });
+```
+
+#### Response Interceptor
+
+An example for intercepting response before resolve.
+
+```ts
+import { Middleware, fatcher, isFatcherError } from 'fatcher';
+
+function responseInterceptor(): Middleware {
+    return {
+        name: 'fatcher-middleware-response-interceptor',
+        async use(context, next) {
+            const result = await next();
+
+            // check anything from result.
+
+            if (result.data.status === 50000) {
+                return Promise.reject(result.data);
+            }
+
+            return result;
+        },
+    };
+}
+
+fatcher({
+    url: '/foo/bar',
+    method: 'POST',
+    middlewares: [responseInterceptor()],
+})
+    .then(response => {
+        // response
+        console.log(response);
+    })
+    .catch(error => {
+        if (isFatcherError(error)) {
+            // handle fatcher error;
+            console.error(error.toJSON());
+            return;
+        }
+        // handle other error
+        console.error(error);
+    });
+```
+
 ## Polyfills
 
 -   [Streams API](https://github.com/MattiasBuelens/web-streams-polyfill#readme)

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -82,7 +82,7 @@ fatcher({
 #### 作用域请求
 
 ```ts
-import { createScopedRequest } from 'fatcher';
+import { createScopedRequest, fatcher, isFatcherError } from 'fatcher';
 import { json } from '@fatcherjs/middleware-json';
 
 // 自定义初始化配置项
@@ -116,7 +116,7 @@ fatcher({
 行内配置 `>` 作用域配置 `>` 全局配置
 
 ```ts
-import { setDefaultOptions } from 'fatcher';
+import { setDefaultOptions, fatcher, isFatcherError } from 'fatcher';
 import { json } from '@fatcherjs/middleware-json';
 
 setDefaultOptions({
@@ -143,6 +143,100 @@ fatcher({
     });
 ```
 
+### 拦截器
+
+实际上是使用自定义中间件来拦截。
+
+#### 请求拦截器
+
+一个在发送前拦截请求的示例。
+
+```ts
+import { Middleware, fatcher, isFatcherError } from 'fatcher';
+
+function requestInterceptor(): Middleware {
+    return {
+        name: 'fatcher-middleware-request-interceptor',
+        use(context, next) {
+            if (!context.payload) {
+                return Promise.reject(new Error('Payload is required.'));
+            }
+
+            if (context.method !== 'POST') {
+                return Promise.reject(new Error('Method is not allowed.'));
+            }
+
+            // 从 context 中检查内容
+
+            return next();
+        },
+    };
+}
+
+fatcher({
+    url: '/foo/bar',
+    method: 'POST',
+    middlewares: [requestInterceptor()],
+})
+    .then(response => {
+        // 响应内容
+        console.log(response);
+    })
+    .catch(error => {
+        if (isFatcherError(error)) {
+            // 处理请求失败的错误
+            console.error(error.toJSON());
+            return;
+        }
+        // 处理其他错误
+        console.error(error);
+    });
+```
+
+#### 响应拦截器
+
+一个在解析前拦截响应的示例。
+
+```ts
+import { Middleware, fatcher, isFatcherError } from 'fatcher';
+
+function responseInterceptor(): Middleware {
+    return {
+        name: 'fatcher-middleware-response-interceptor',
+        async use(context, next) {
+            const result = await next();
+
+            // 从 result 中检查内容
+
+            if (result.data.status === 50000) {
+                return Promise.reject(result.data);
+            }
+
+            return result;
+        },
+    };
+}
+
+fatcher({
+    url: '/foo/bar',
+    method: 'POST',
+    middlewares: [responseInterceptor()],
+})
+    .then(response => {
+        // 响应内容
+        console.log(response);
+    })
+    .catch(error => {
+        if (isFatcherError(error)) {
+            // 处理请求失败的错误
+            console.error(error.toJSON());
+            return;
+        }
+        // 处理其他错误
+        console.error(error);
+    });
+```
+
 ## Polyfills
 
 -   [Streams API](https://github.com/MattiasBuelens/web-streams-polyfill#readme)