『壹』 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服務，還能用於測試。