『壹』 MSW：可用于浏览器和测试的Mock服务
在VUE项目开发中，大部分需求会涉及API数据交互，为了保证项目效率，前端通常需要一个API服务器来确保前端开发进度，这就是所谓的Mock服务。网络上有许多类型的Mock工具，使用不同的方法解决同一个问题。
主要包括两种类型：
一种是使用服务器语言（如Node.js、PHP）模拟一个服务器
另一种是使用拦截器拦截请求然后重定向到前端准备好的处理函数。
拦截器方式的Mock工具，在VUE中常用的有axios-mock-adapter，但是它对于API类型的支持不够，如REST或者GraphQLAPI。
本文带大家来认识一下MockServiceWorke（MSW），一个功能完善的APIMock工具，它可以使用ServiceWorker拦截HTTP请求，可以模拟真实的HTTP请求，可以使用浏览器的DevTools进行查看，并且是在ServiceWorker级别上工作。MSW也可以用在项目的测试代码中，不必为项目的HTTP响应设置额外的测试。文章涉及的代码在GitHub及RESTApi相关知识可以参阅专栏《布道API》。
什么是MSWMockServiceWorker是一个API模拟库，它使用ServiceWorkerAPI来拦截实际请求。——MSWdocs
注意：ServiceWorker只能在浏览器环境中工作。在Node.js环境中，MSW利用Node.js的请求拦截器库，并允许重用来自浏览器环境的相同模拟定义。
什么是ServiceWorkerMSW依赖于ServiceWorker，ServiceWorker本质上是浏览器在后台运行的脚本，它是完全独立于它正在处理或服务的网页。它们充当了web应用程序、浏览器和网络之间的代理服务器，目的是为前端应用程序创建一个良好的离线体验，关于ServiceWorker的更多内容可以参阅《ServiceWorker工作原理、生命周期和使用场景》。而MSW就是建立在ServiceWorker的缓存机制之上的。
为了更好的介绍MSW的使用，下面从创建一个全新的应用开始。
创建VUE应用使用VueCLI创建一个新的Vue应用程序，在终端中，执行下面的命令：
vuecreatevue-msw选择第三个选项：
回车后，选择UnitTesting，按下空格键，然后回车：
选择3.x(Preview)：
然后选择默认选项：
然后选择单元测试项，选择Jest：
接下来步骤继续默认选项，最后出现下面的内容，输入N：
创建项目完成后，由于需要用到AJAX通讯，下面将安装最熟悉的依赖axios，如下：
yarnaddaxios//或者npminstallaxios--save打开项目文件，创建路径和文件/src/services/axios.js，代码如下：
importaxiosfrom"axios";constapiClient=axios.create({baseURL:"/api",});apiClient.interceptors.response.use((response)=>{returnresponse.data;},(error)=>{returnPromise.reject(error||error.response);});exportconstgetArticle=async(articleId)=>{constresponse=awaitapiClient.get(`/articles/${articleId}`);returnresponse;};接下打开项目文件src/App.vue，将默认代码替换为以下代码：
<template><blockquotev-if="error">{{error}}</blockquote><divv-if="detail"><h4><a:href="detail.url"target="_blank">{{detail.title}}</a></h4><p>{{detail.content}}</p></div></template><script>import{getArticle}from"@/services/axios";exportdefault{data(){return{articleId:3,detail:null,error:null,};},asynccreated(){try{this.detail=awaitgetArticle(this.articleId);}catch(error){this.error="API服务异常";}},};</script>现在可以启动项目了，运行代码：
yarnserve//npmrunserve打开浏览器，输入地址，将看到异常信息：API服务异常。打开开发者工具，可以看到接口返回404状态，这是因为接口不存在导致的。
创建Mock先增加依赖msw，执行命令：
yarnaddmsw//npminstallmsw--save安装完成后，在目录src中创建文件夹mocks，并创建两个文件，分别为handlers.js和browser.js，分别的用途如下：
handlers.js：主要为定义API逻辑的代码
browser.js：使用handlers.js中的代码初始化模拟的serviceworker
/src/mocks/handlers.js代码如下：
import{rest}from"msw";constarticles=[{id:1,title:"Node.js日志最佳实践指南",content:"在开发阶段，无论是日志记录还是调试，都可以很容易地跟踪程序并检测到错误。但是在生产环境中，应该考虑更多关于日志记录的问题，因为这对于应用程序的监视和故障排除非常关键。",url:"https://juejin.cn/post/7017811851345920037",},{id:2,title:"NodeJs全栈创建多文件断点续传",content:"文件上传，算是项目开发中比较常见的需求，本文将展示如何构建一个多文件断点续传组件，可以同时处理多个文件，并可以在出现异常或者网络中断的情况下恢复上传，可以手动暂停和恢复文件的上传。文章内容涉及前端和后端，算是一个小型的全栈项目，项目将使用NodeJs、Express、Busboy和XMLHttpRequest，并使用自己开发的脚手架generator-norm来构建项目。",url:"https://juejin.cn/post/7015935144007729189",},{id:3,title:"Node.js日志之winston使用指南",content:"Winston是强大、灵活的Node.js开源日志库之一，理论上，Winston是一个可以记录所有信息的记录器。这是一个高度直观的工具，易于定制。",url:"https://juejin.cn/post/7018169629176496158",},];exportconsthandlers=[rest.get(`/api/articles/:id`,(req,res,ctx)=>{const{id}=req.params;constdata=articles.find((item)=>item.id===parseInt(id,10));if(data){returnres(ctx.status(200),ctx.json(data));}else{returnres(ctx.status(500));}}),];exportconstdefaultHandlers=[];/src/mocks/browser.js代码如下：
import{setupWorker}from"msw";import{handlers,defaultHandlers}from"./handlers";exportconstmocker=setupWorker(...handlers,...defaultHandlers);至此，Mock的逻辑基本完成，接下来需要将其引入到项目中，修改文件src/main.js，加入下面代码：
if(process.env.NODE_ENV==="development"){const{mocker}=require("./mocks/browser");mocker.start({//对于没有mock的接口直接通过，避免异常onUnhandledRequest:"bypass",});}接下来将在public文件夹中生成一个ServiceWorker脚本：
npxmswinitpublic/执行完成之后，会创建一个js文件，不过不用去做任何修改，再次启动项目，效果如下：
打开开发者工具，查看网络请求，如下：
而axios-mock-adapter实现的Mock再开发工具中无法查看到。
MSW用于测试MSW的美妙之处在于，可以重用相同的处理代码进行测试。
测试将使用Vue测试库（VTL），因为它的设计理念和MSW更贴合。测试将模拟客户端请求。接下来修改package.json增加3个开发依赖库：
yarnaddaxios//或者npminstallaxios--save0保存后，执行一下代码：
yarnaddaxios//或者npminstallaxios--save1完成后，创建目录tests/unit,并创建文件App.spec.js，代码如下：
yarnaddaxios//或者npminstallaxios--save2上面测试代码只对API请求的状态码进行测试，运行下命令：
yarnaddaxios//或者npminstallaxios--save3正如上面介绍的，MSW不仅可以用于构建Mock服务，还能用于测试。