下一代mock api工具 -- Mock Service Worker

官网：https://mswjs.io/examples
前提：
-vue create my-project（vue3默认，没用ts的模版）

使用步骤

1、下载

$ npm install msw --save-dev
# or
$ yarn add msw --dev

2、创建目录+文件

$ mkdir src/mocks
$ touch src/mocks/handlers.js

3、src/mocks/handlers.js

// 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',
      }),
    )
  }),
]

4、下载msw

$ npx msw init public/ --save

5、创建文件

$ npx msw init public/ --save

5、src/mocks/browser.js

// 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)

6、main.js

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

运行项目在浏览器中cosole显示[MSW] Mocking enabled.成功了～

7、使用接口

<template>
 	<button  @click="handleLogin">登陆测试</button>
</template>
<script>
export default {
  setup(){
    const handleLogin=()=>{
        fetch('/login',{
            method:'POST',
        }).then((v)=>{
            console.log(v)
        })
    };
    return {
        handleLogin
    }
  }
}
</script>