【效率工具】下一代前端数据接口模拟工具-mock service worker（一）

这是我参与更文挑战的第 9 天，活动详情查看： 更文挑战

前文介绍了 【效率工具】接口调试工具-Insomnia(一) 、postman/postwoman 等(二)-，-本文介绍数据接口模拟工具 Mock Service Worker

仅当参考，按需食用，不足之处，欢迎各路大佬不吝赐教，补充完善，欢迎分享

• 工欲善其事，必先利其器。实践（巧偷懒）促进科技发展
• 前后端分离开发过程中，免不了前端开发进程早于后端，为了不受服务器接口的限制，需要模拟数据接口的情况
• 本文分享在项目开发中前端进行的mock api 数据接口模拟工具， 助你开发提效

Mock Service Worker

1. 介绍

号称 下一代 api mock 工具

API mocking of the next generation Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.

【为什么要使用?】

Mock Service Worker 利用标准化的 Service Worker API，旨在拦截网络级别的请求，使模拟完全无缝衔接。这不仅保证了使用和不使用模拟的相同应用程序的行为，而且不需要为了模拟而对应用程序的代码进行任何更改。

【官网】： mswjs.io

【文档】： hoppscotch.io

【github 源码】： github/mswjs

【北墙了？-,-?】自行找梯子

2. 小试牛刀手把手：使用方法

如下方案是在 Vue-cli 创建项目在使用方法介绍，React同理，其他途径方法留给勤快的你自行探索

2.1 创建项目文件 可在现存项目中测试 忽略

mkdir test-msw
cd test-msw
# vue-cli 创建一个项目
vue create <project-name>

• 安装依赖 msw -D

yarn add msw --dev

• 创建数据模拟服务 文件夹

mkdir src/mocks

下面开始开始定义具体逻辑代码

2.2 创建 src/mocks/handler.js

touch src/mocks/handlers.js

按照文档步骤，这时需要我们选择 API type，这里选择 Mocking REST API

2.3 首先从 msw 库导入

// src/mocks/handlers.js
import { msw } from 'msw'

2.4 下面就是具体逻辑了： 请求处理架子

// 架子
// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  // Handles a POST /login request
  rest.post('/login', null),

  // Handles a GET /user request
  rest.get('/user', null),
]

2.5 具体代码： 登录 判断 请求

// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  rest.post('/login', (req, res, ctx) => {
    // Persist user's authentication in the session
    sessionStorage.setItem('is-authenticated', 'true')

    return res(
      // Respond with a 200 status code
      ctx.status(200)
    )
  }),

  rest.get('/user', (req, res, ctx) => {
    // Check if the user is authenticated in this session
    const isAuthenticated = sessionStorage.getItem('is-authenticated')

    if (!isAuthenticated) {
      // If not authenticated, respond with a 403 error
      return res(
        ctx.status(403),
        ctx.json({
          errorMessage: 'Not authorized',
        })
      )
    }

    // If authenticated, return a mocked user details
    return res(
      ctx.status(200),
      ctx.json({
        username: 'admin',
      })
    )
  }),
]

2.6 选择运行环境

按照文档步骤，这时需要我们选择 msw运行环境，这里选择 browser

touch src/mocks/browser.js

2.7 注册服务

代码很简单，引入我们的处理请求逻辑，注册服务就可以了。

// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

2.8 引入服务到项目 main.ts

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start()
}

启动项目会在调试栏打印服务成功状态 [MSW] Mocking enabled

2.9 测试使用 效果

在测试页面 pages/test/test.vue 简单写入两个按钮，用来发送请求

<template>
  <div class="mock-service-worker">
    <button @click="handleLogin">login</button>
    <button @click="handleGetUser">get user</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'test',
  setup () {
    const handleLogin = () => {
      fetch('/login', {
        method: 'POST'
      }).then((v) => {
        console.log('v', v)
      })
    }

    const handleGetUser = () => {
      fetch('user')
        .then((v) => {
          return v.json()
        })
        .then((v) => {
          console.log('v.json', v)
        })
    }

    return {
      handleLogin,
      handleGetUser
    }
  }
})
</script>

2.10 启动服务8080， 查看效果

2.10.1 点击 login 发送请求，成功如下

2.10.2 点击 get-user 获取用户名，

2.10.3 这时已经登录了，获取用户请求可以成功，我们清除一下登录信息，再次请求，看是否拦截到

2.10.4 删除已登录信息，再次请求 因未登录触发我们的处理逻辑，输出 403 Forbidden

截止当前，我们已经将 Mock Service Worker 这个库了解的差不多了， 接下来就是结合我们的项目具体逻辑，进行更深一步的探究了，

当然好用的 mock api 工具还有很多很多，这里列举部分工具，仅作参考，抛砖引玉，

这些都是可以根据自己需求来定制的， 可以大大提高码字效率，有没有 get 到呢?

欢迎评论出你的私藏工具分享给大家=，=

今日份预告 明天更新：

说完了 号称下一代的前后端接口调试工具， 明天计划更新一些其他的数据接口模拟工具mock api

本文介绍的 下一代 mock api 是不是挺简单的，特别容易上手，下一篇敬请期待！ hahah~