前端必備!5大mock省時提效小tips,用了提前下班一小時

長霽發表於2021-11-30

一.一些為難前端的業務場景

在我的工作經歷裡,需要等待後端童鞋配合我的情形大概有以下幾種:

a.我們跟外部有專案合作,需要呼叫到第三方介面。

一般這種情況下,商務那邊談合同,走流程,等第三方稽核,我們這邊會直接開始開發,而這個時候還沒有外部介面可以使用;或者是合同都談妥了,但是第三方對接的工作人員排期還沒有排到。總之是需要等。

b.活動搶節點上線

一個比較趕時間節點(如七夕,雙十一)的活動需求下來,前後端同時開發,後端還沒有開發完介面可以除錯。

c.需要呼叫的介面很複雜。

本來我只需要一個簡單的返回,但因為各種歷史原因和業務分割等原因需要間接呼叫N個不同的複雜介面,導致這部分工作量非常大耗費時間很多,但又沒有很大的價值。

這個時候我就偏向於選擇mock,聯調時就做得粗糙一點,然後等進入測試階段,讓測試同學給我暴露問題(測試童鞋請原諒我偷懶hahah)

現在給前端mock的軟體也有很多,大家自己挑自己合適的就好。

其實mock工具都滿足的需求都大同小異,關鍵在於能夠模擬出一些業務場景裡面具體的細節,細節減少你在重複的事情上花費的時間。

我個人現在用的是apifox(www.apifox.cn),比較起來優點是它能仿造出比較逼真的業務資料,我不用再去二次調整。

細節上節省的時間每天要是仔細去算,也有一兩個小時的,省下來就是能提前下班的時長。

我這裡只寫一些我嘗試過的在Apifox上mock資料的省時小技巧。

二.省時提效小tips

tips1:常用的返回引數封裝成一個資料模型,用到直接填。

比如一個音樂軟體,最常用到的返回資料可能是歌手資料和歌曲資料。

歌手資料包括:歌手頭像,歌手姓名,性別,熱門歌曲50首等資訊;

歌曲資料包括:歌曲名稱,大小,歌曲連結,專輯封面,所屬歌手,歌詞檔案等資訊。

如果每次設定返回值都需要重複設定上述欄位,那麼麻煩又耗時。

這時候可以將常用引數分別封裝成一個資料型別,填返回值的時候直接填進去,這樣介面返回就能返回相應的欄位了。 圖片.png圖片.png

tips2:資料採用高模擬資料,避免資料型別和顯示的相關bug

之前我自己造假資料有時候會忽略了格式,只填數字或隨便打幾個中文字元填充,這樣容易產生不必要的錯誤。

一是返回的資料會有格式校驗,不符合的會報錯,這時再回頭修改浪費了時間;

二是不符合資料結構的展示也可能會出異常,如果後續還要用這個資料進行處理也會阻礙程式的正常執行。

別的軟體沒怎麼細用我沒法詳細展開說。如果大家是用apifox這個軟體來mock資料的話,它在返回資料型別那裡提供了很多常用的資料型別以供填充。

大家在造資料時可以根據自己的業務型別造出更模擬的資料出來。

造資料實際上很麻煩又費時間。普通的如中文姓名的還好說,如果要造URL,郵編,16進位制色值,域名,身份證號我經常得去檢索一下資料規則才能造。

一般我是在這個軟體填完返回引數後再進一步選擇某類資料,apifox會自動生成符合相應資料結構要求的資料出來。

它可以支援基礎的文字,身份證,ip地址,url這類資料也能仿造出來。圖片.png圖片.png圖片.png

舉個例子:我在返回值中分別設定了下列資料型別:
圖片.png

返回值資料如下,出來的是能用的“真”資料了。圖片.png

tips3:邊界場景給介面“打暗號”除錯

apifox提供了一個高階mock功能:當使用者在請求引數中填寫的值符合特定的條件的時候,介面會返回特定的值。

我一般用這個功能來做邊界場景的測試,比如說設定請求引數的值為none讓介面返回空值;或者測試某個欄位在各種長度下UI的表現是否正常。圖片.png

tips4:錯誤碼使用列舉型別,除錯異常場景的相容

另外有時候我們前端需要對後端返回的錯誤碼進行相容處理或者給到使用者相關提示。

除錯這個功能的時候我有一個比較取巧的方式是利用response引數設定裡的高階設定。

將錯誤碼以列舉值的形式填進去。測試當後端返回不同的錯誤碼型別時,前端是否有相應的反饋。圖片.png圖片.png

tips5:有業務約束的設定更精準的返回值

在mock資料上,除了資料型別本身的約束,還存在著業務約束。

有時候雖然返回的資料型別是我們要的,符合資料格式了,但還可能不符合我們實際的業務場景。

舉例:某個曲庫裡只有50000張album,但album返回值設定了integer,導致每次返回可能會超出曲庫ID上限而返回異常值。但我是需要返回的東西來執行進一步操作的,我需要它正常返回。

此時可進入高階設定,設定好返回值的數值範圍,從而使得返回的資料能符合我們的除錯要求。

這些雖然是很小的功能點,但確實在實際業務裡能給大家節省掉不少時間。
圖片.png圖片.png

目前apifox這個軟體我只用了mock功能,所以就先分享這麼多,後續有其他可以提高效率省時省力的小tips我再分享給大家。

如果想下載的話可以直接去他們官網www.apifox.cn,軟體目前還是免費的,直接下載就能用了。

相關文章