官网: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>