Skip to content

Commit 0d918ab

Browse files
committed
docs: add description of interceptor
1 parent e5ea96e commit 0d918ab

File tree

4 files changed

+56
-1
lines changed

4 files changed

+56
-1
lines changed

README-CN.MD

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,34 @@ axios.post('https://www.api.com/reqinfo?abc=123', {xyz: 456}, {responseType: 'js
325325
```
326326

327327

328+
#### 拦截器
329+
330+
您可以拦截一个请求,执行某些操作,然后让原始请求继续执行并捕获响应,再执行另外一些操作。
331+
关于拦截器的更详细讨论,可以参考这个[issue](https://github.com/huturen/http-request-mock/issues/14)
332+
333+
334+
```javascript
335+
// mock用例
336+
mocker.mock({
337+
url: '//jsonplaceholder.typicode.com/',
338+
response: async function(requestInfo) {
339+
// 1. 拦截一个请求,并执行一些事情,这里打印一些请求信息
340+
console.log('original request info: ', requestInfo);
341+
342+
// 2. 然后执行原始请求调用,捕获返回的请求
343+
const res = await requestInfo.doOriginalCall();
344+
345+
// 3. 最后再做一些其它的事情
346+
console.log('original response:', res);
347+
return { code: 0, msg: 'ok', data: res.responseJson };
348+
}
349+
});
350+
351+
// 执行一个请求
352+
axios.get('https://jsonplaceholder.typicode.com/photos/1').then(res => console.log(res.data));
353+
```
354+
355+
328356
## 项目整合
329357
对于简单项目来说,只要在项目入口引入`http-request-mock`并配置mok数据就可以用mock了, 以vue项目为例:
330358
```javascript

README.MD

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,33 @@ axios.post('https://www.api.com/reqinfo?abc=123', {xyz: 456}, {responseType: 'js
331331
```
332332

333333

334+
335+
#### Interceptor
336+
You can intercept a request, do something, then make the original call and capture the response and do something again.
337+
For more detailed discussions about the interceptor, please refer to this [issue](https://github.com/huturen/http-request-mock/issues/14).
338+
```javascript
339+
// mock case
340+
mocker.mock({
341+
url: '//jsonplaceholder.typicode.com/',
342+
response: async function(requestInfo) {
343+
// 1. intercept a request, do something (here, output the original request information)
344+
console.log('original request info: ', requestInfo);
345+
346+
// 2. then make the original call and capture the response
347+
const res = await requestInfo.doOriginalCall();
348+
349+
// 3. and do something again.
350+
console.log('original response:', res);
351+
return { code: 0, msg: 'ok', data: res.responseJson };
352+
}
353+
});
354+
355+
// issue a request
356+
axios.get('https://jsonplaceholder.typicode.com/photos/1').then(res => console.log(res.data));
357+
```
358+
359+
360+
334361
## Integration
335362
In a bare-bones example, you just import `http-request-mock` into your application
336363
entry file(such as: src/main.js) and configure your mock datas there.

docs/interceptor.png

185 KB
Loading

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "http-request-mock",
3-
"version": "1.8.14",
3+
"version": "1.8.15",
44
"description": "Intercept & mock http requests issued by XMLHttpRequest, fetch, nodejs https/http module, axios, jquery, superagent, ky, node-fetch, request, got or any other request libraries by intercepting XMLHttpRequest, fetch and nodejs native requests in low level.",
55
"main": "src/index.js",
66
"module": "http-request-mock.esm.mjs",

0 commit comments

Comments
 (0)