sino-msw-tool v1.1.20

msw-tools

msw-tool 是基于msw(Mock Service Worker)而开发的插件，旨在提高开发效率，不侵入业务代码，方便多分支业务场景灵活切换，通过msw 提供的api，监听所有请求的接口，并能够获取已经响应的接口数据，开发者能够即时修改任何响应数据，即时生效

使用

• 安装msw-tool - yarn add sino-msw-tool --dev

• 执行msw初始化(文档),PUBLIC_DIR 为public文件夹路径，目的是将worker的js代码放到public文件夹下面

  • npx msw init <PUBLIC_DIR> --save （umi项目需要新建public目录）

  • 在开发模式下引入

    //在create-react-app中
    import { MswUi } from "sino-msw-tool";
    ......
    ......
    //projectName为项目名称，作为存储唯一key
    ReactDOM.render(
      <MswUi projectName="creation_front">
        <AppProvider>
          <App />
        </AppProvider>
      </MswUi>,
      document.getElementById('root')
    );

    //在umi中
    //app.tsx
    import { MswUi } from 'sino-msw-tool';
    
    export function rootContainer(container) {
      return <MswUi projectName="creation_front">{container}</MswUi>;
    }

功能

1. 即时修改服务端返回数据，即时生效
2. 支持创建case接口归类，方便切换多case场景
3. 支持mock接口管理，方便随时关闭、开启、删除、修改mock
4. 支持mock接口复制
5. 支持自定义接口响应状态码
6. 支持接口延迟时间设置
7. 支持从swagger导入并自动生成mock数据
8. ......

注意

1. 关于https，需要注意的事项

• https证书无效的时候，msw是无法拦截请求的，具体可以查看https://mswjs.io/docs/recipes/using-local-https

2. 关于Create React App (version 3)

• 如果使用的是Create-React-App v3版本创建的项目，需要删除以下代码

  // src/index.js
  // Create-React-App v3版本创建的会默认去掉所有service的注册，这样会导致工具无效
  serviceWorker.unregister()

3. 关于http协议下，报错Refused to set unsafe header "cookie"
   • 这是由于浏览器对service worker的安全限制，导致msw库失效
   • 解决方法：在chrome中打开chrome://flags/#unsafely-treat-insecure-origin-as-secure，将本地开发地址填写进去（如果有端口，需要把端口也加进去，比如：http://local.sinoclick.com:7220）