浏览器环境

Suchjs 库本身不支持拦截请求、mock 数据,但提供了单独的库扩展方法 such-mock-browseropen in new window 来对数据接口进行扩展。

<script 
src="https://cdn.jsdelivr.net/gh/suchjs/such@master/dist/such.min.js"
></script>
<script 
src="https://cdn.jsdelivr.net/gh/suchjs/such-mock-browser@main/dist/such-mock-browser.min.js"
></script>
<script>
  const globalSuch = Such.default;
  // 挂载在Such类prototype方法mock上的常量
  const { target, method } = globalSuch.mock;
  /*
   * 以下注释的Such指的Such对象的实例
   * Such.mock(
   *    pathname: string | RegExp,
   *    matcher: RequestMethod | string | ((req, params) => boolean)),
   *    data: (req, params) => data | unkown,
   *    responseOptions?: {
   *      timeout?: number,
   *      transformer?: (resp: MockedResponse) => void | MockedResponse
   *    }
   * );
   * Such.mock 接受三到四个参数
   * -----------------------------------------------
   * pathname: 对应要拦截的路径,可以是字符串也可以是正则
   * matcher:
   *   - 对应除了路径匹配之外,针对请求还需要进一步匹配的逻辑
   *   - 该参数可以是字符串,也可以库里内置的 method 枚举的值的组合
   *   - 也可以是一个能获取到请求与路径参数的返回布尔值函数
   * data:
   *   - 可以是直接需要被 `Such.as` 调用的对象
   *   - 也可是一个提供了请求与路径参数的函数,这样可以在函数里处理逻辑再返回数据
   * responseOptions:
   *   - 因为当以上pathname和matcher都匹配到后,就会按照data参数生成数据进行响应返回
   *   - 默认的响应是json格式数据
   *   - 但有时返回json格式数据可能不是你想要的,因此可以通过这里来进行覆写
   *   - 参数可以是一个响应对象,从而对默认响应数据进行覆盖
   *   - 参数也可以是一个注入了当前默认响应数据的函数,在函数体内可以对响应数据进行修改
   */
  globalSuch.mock("/a", method.GET, {
    a: ":uppercase:{3,5}",
  });
  globalSuch.mock(/\/\w*/, "*", {
    any: "*",
  }, {
    // 这里将覆盖intercept时指定timeout
    // 可以为每个接口指定不同的响应时间范围
    timeout: 6000
  });
  // 在最后需要执行拦截方法,接受的参数为一个需要被拦截的target类型
  // 目前挂载在Such.mock上的target包含两种类型
  // - XHR 拦截XMLHttpRequest
  // - FETCH 拦截window.fetch方法
  globalSuch.mock.intercept(target.XHR | target.FETCH, {
    // 可以指定响应时间参数
    // [1000, 3000] 表示响应随机在1秒到3秒之间
    // 也可以是具体的数字,如 5000,5秒
    timeout: [1000, 3000] 
  });
  // 以使用jQuery为例
  $.get("/a", function (res) {
    console.log(res);
  }); 
  // 以上将输出类似 {a: 'LDFC'}
  window
    .fetch("/anything", {
      method: "GET",
    })
    .then((res) => res.json())
    .then((data) => {
      console.log(data);
    }); 
  // 以上将输出 {any: '*'}
  // 解除拦截
  globalSuch.mock.unintercept();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

Nodejs 环境

nodejs 环境下,可在项目中安装 such-cli 包,在本地来启动一个 mock server 服务。详细的介绍可以参看such-cli命令行工具open in new window