一:使用場景
哎喲,好煩啊,這個需求還么結束就來下一個需求,程序員不要排期的嗎?
沒辦法啊,資本主義的XX嘴臉啊
來吧,技術評審我倆把接口格式對一把,你先開發,我這邊結束了我跟上,再聯調
MMP,那又增加了我的工作量啊,每次我都要自己先把數據放在一個配置文件中,引入使用,然后對接的
時候還得刪除無用代碼,好氣
你自己Mock接口啊,就向我們后端經常用PostMan一樣模擬請求啊
Mock??我去查查看
二:Mock的概念
1:Mock的描述
Mock接口其實就是模擬真實接口提供一個在開發環境的假數據,甚至是真實數據,在開發時,經常出現
接口內容不能夠及時的跟進,導致開發過程中添加一些額外的工作量。接下來的例子全部圍繞著Vue為主體介紹
前后端提前確定好通信的JSON格式之后,我們在不依賴后端進度的同時,能提供一套好的開發體驗。
2:Mock能解決的問題
減少額外工作,在沒有Mock接口的時候我們模擬數據的方式很煩躁,比如list列表,需要在data中聲明list,去調試內容,或者引入一個mock文件,這樣做導致在聯調調用接口的部分代碼沒有寫,聯調成功的時候要刪除很多無用代碼 ---> 通過Mock只需在聯調的時候把Mock接口的地址換成真實地址即可
import { mockList2 } from 'mock/list.js';export default { data () { return { mockList: [ { "name": 'tx', "age": 12 } ], mockList2 } }}如果采用上述的方式去模擬數據,缺少真正缺口所具備的狀態,比如刪除接口,有成功和失敗的區分,這個模擬就很惡心了 ----> 通過Mock,可以直接通過實在的query或者其他的操作來達到同樣的目的
3:Mock的幾種方式以及對應的優缺點
| Mock的方式 | 優缺點 |
|---|---|
| 本地Mock接口 | 優點:可以更加細粒度的控制mock的內容。缺點:需要增加本地的代碼量,以及需要配置webapck |
| Mock.js實現ajax攔截 | 優點:數據通過mock.js會更豐富。缺點:增加一些本地配置,攔截ajax |
| 后端Controller的靜態JSON | 優點:接口聯調不需要修改任何東西。缺點:修改Mock內容溝通成本高,跟后端扯皮 |
| 利用FastMock去模擬Mock | 優點:可控內容以及實現動態Restful api。缺點:如果項目包裝axios等請求庫之后需要針對接口轉發做不同處理 |
4:本地Mock接口
該篇文章針對本地Mock接口進行操作,其他的方式會簡要介紹并給出對應的鏈接,如果有需要,自行去查閱。
新聞熱點
疑難解答
圖片精選