前言
- 項(xiàng)目開發(fā)過程中經(jīng)常會(huì)遇到的問題：前端開發(fā)完了需要等待后端聯(lián)調(diào)測(cè)試，而后端因?yàn)閤xx還未達(dá)到聯(lián)調(diào)狀態(tài)，對(duì)于這種前后端強(qiáng)依賴的項(xiàng)目，最簡單的方式是前端自己來mock數(shù)據(jù)，對(duì)于QA同學(xué)也是如此，學(xué)會(huì)了mock，測(cè)試前端需求時(shí)，不需要跑一大圈走各種復(fù)雜的場(chǎng)景就來造數(shù)據(jù)。
mock步驟
-
1、使用工具postman，新建一個(gè)new collection命名，collection下新建一個(gè)請(qǐng)求，把請(qǐng)求的url和參數(shù)都填好；點(diǎn)擊創(chuàng)建的collection文件夾右邊的三個(gè)點(diǎn)點(diǎn)，選擇Mock Collection，填好對(duì)應(yīng)的信息，服務(wù)名隨便寫，環(huán)境選擇創(chuàng)建mock server時(shí)的名字；點(diǎn)擊api key獲取自己的key存下來，后面會(huì)用到。
image.png
Mock Collection創(chuàng)建完成之后，下圖這個(gè)頁面的url就是mock server的域名，復(fù)制下來，后面拼上接口路徑就能訪問mock數(shù)據(jù)了（當(dāng)然這一步在最后去做）
-
2、上面創(chuàng)建Mock Collection需要選擇環(huán)境嗎，下面就需要?jiǎng)?chuàng)建一個(gè)mock server，選擇需要mock的接口的請(qǐng)求方式、接口路徑、要mock的返回，服務(wù)名寫上面第一步選擇的那個(gè)服務(wù)名mock-test
image.png
-
3、找到要mock的接口，創(chuàng)建examples，填好要mock返回的結(jié)果，保存，選擇mock環(huán)境，選擇右邊的小眼睛，點(diǎn)開會(huì)看到mock的域名url和x-apikey寫進(jìn)來，說明ok了
image.png
- 4、復(fù)制url，后面帶上接口path，如：
https://4f94eeb2-5a4f-481a-a135-4d8db3660646.mock.pstmn.io/SuggestionNew
放在postman里面請(qǐng)求一下，即可看到mock返回，如果出錯(cuò)需要在headers里加一下x-api-key
image.png
mock數(shù)據(jù)的使用
-
數(shù)據(jù)mock完了，怎么用呢，用瀏覽器打開驗(yàn)證一下返回，會(huì)發(fā)現(xiàn)返回error，下圖所示，而postman是ok的
image.png
是因?yàn)闉g覽器默認(rèn)get請(qǐng)求方式，而我的接口是post請(qǐng)求，那怎么辦呢，打開瀏覽器控制臺(tái)console（更多工具-開發(fā)者工具），貼下面這段代碼，把對(duì)應(yīng)的url改成生成的mock地址，x-api-key對(duì)應(yīng)value也替換成自己的key，這樣就可以用這份數(shù)據(jù)來進(jìn)行本地調(diào)試了，qa如果需要用的話也可以寫個(gè)小腳本去調(diào)一下（當(dāng)然我司是有自動(dòng)化測(cè)試平臺(tái)mock完了之后測(cè)試環(huán)境可共用，目前還不知道postman能不能強(qiáng)大到mock完了之后整個(gè)環(huán)境復(fù)用）。
fetch(new Request('url',{
method:'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded','x-api-key':'xxx'},
body:null
})).then((resp)=>{console.log(resp)})
ps：創(chuàng)建mock server和examples的順序是可以調(diào)換的，具體過程中遇到的問題找度娘大部分都可以解決，mark一下，有不當(dāng)之處歡迎指正。
