前端 Mock 工具

Posted 2022-12-05 王乐平

名称	地址	安装
Mock.js	https://github.com/nuysoft/Mock	npm install mockjs
mockm	https://github.com/wll8/mockm	npm install mockm
JSON Server	https://github.com/typicode/json-server	npm install json-server
MSW(Mock Service Worker)	https://github.com/mswjs/msw	npm install msw
Mirage JS	https://github.com/miragejs/miragejs	npm install miragejs

Mirage JS

特性：

• 复写 fetch 和 XMLHttpRequest 实现拦截，所以在 Dev Tools 中的 Network 是看不到请求的。
• 默认全部拦截，直通函数 passthrough 匹配不太友好。

使用它主要是因为不用配置代理，也不用单独去启动一个新的端口来承载 Mock Server，相对使用简单，用来做测试还是挺方便的。体验上的不足就是 Network 面板看不到请求了，不过可以接受。

示例：

import  createServer  from "miragejs"

createServer(
  routes() 
    this.namespace = "api"

    this.get("/movies", () => 
      return 
        movies: [
           id: 1, name: "Inception", year: 2010 ,
           id: 2, name: "Interstellar", year: 2014 ,
           id: 3, name: "Dunkirk", year: 2017 ,
        ],
      
    )
  ,
)

超时配置

this.get(
  "/movies",
  () => 
    return 
      movies: [
         id: 1, name: "Inception", year: 2010 ,
         id: 2, name: "Interstellar", year: 2014 ,
         id: 3, name: "Dunkirk", year: 2017 ,
      ],
    
  ,
   timing: 4000 
)

OR

this.get("/movies", () => 
  return new Promise((res) => 
    setTimeout(() => 
      res(
        movies: [
           id: 1, name: "Inception", year: 2010 ,
           id: 2, name: "Interstellar", year: 2014 ,
           id: 3, name: "Dunkirk", year: 2017 ,
        ],
      );
    , 4000);
  );
);

根据 url 参数动态配置超时：

// fetch("/movies?t=2000")
this.get("/movies", (_, req) => 
  return new Promise((res) => 
    setTimeout(() => 
      res(
        movies: [
           id: 1, name: "Inception", year: 2010 ,
           id: 2, name: "Interstellar", year: 2014 ,
           id: 3, name: "Dunkirk", year: 2017 ,
        ],
      );
    , req.queryParams.t || 0);
  );
);

请求直通

官方的文档不生效，看了下代码实现有问题，如下：

// createPretender
this.checkPassthrough = function (request) 
  let shouldPassthrough = server.passthroughChecks.some(
    (passthroughCheck) => passthroughCheck(request)
  );

  if (shouldPassthrough) 
    let url = request.url.includes("?")
      ? request.url.substr(0, request.url.indexOf("?"))
      : request.url;

    this[request.method.toLowerCase()](url, this.passthrough);
  

  return originalCheckPassthrough.apply(this, arguments);
;

// Server
passthrough(...paths) 
  // this only works in browser-like environments for now. in node users will have to configure
  // their own interceptor if they are using one.
  if (typeof window !== "undefined") 
    let verbs = ["get", "post", "put", "delete", "patch", "options", "head"];
    let lastArg = paths[paths.length - 1];

    if (paths.length === 0) 
      paths = ["/**", "/"];
     else if (Array.isArray(lastArg)) 
      verbs = paths.pop();
    

    paths.forEach((path) => 
      if (typeof path === "function") 
        this.passthroughChecks.push(path);
       else 
        verbs.forEach((verb) => 
          let fullPath = this._getFullPath(path);
          this.pretender[verb](fullPath, this.pretender.passthrough);
        );
      
    );
  

可以采用这种方式，来把 namespace 外的请求，都不做处理，把以下代码入到 routes 中执行：

this.passthrough((req) => 
  return req.url.indexOf(this.namespace) === -1;
);