前言
- 项目开发过程中经常会遇到的问题：前端开发完了需要等待后端联调测试，而后端因为xxx还未达到联调状态，对于这种前后端强依赖的项目，最简单的方式是前端自己来mock数据，对于QA同学也是如此，学会了mock，测试前端需求时，不需要跑一大圈走各种复杂的场景就来造数据。
mock步骤
-
1、使用工具postman，新建一个new collection命名，collection下新建一个请求，把请求的url和参数都填好；点击创建的collection文件夹右边的三个点点，选择Mock Collection，填好对应的信息，服务名随便写，环境选择创建mock server时的名字；点击api key获取自己的key存下来，后面会用到。
image.png
Mock Collection创建完成之后，下图这个页面的url就是mock server的域名，复制下来，后面拼上接口路径就能访问mock数据了（当然这一步在最后去做）
-
2、上面创建Mock Collection需要选择环境吗，下面就需要创建一个mock server，选择需要mock的接口的请求方式、接口路径、要mock的返回，服务名写上面第一步选择的那个服务名mock-test
image.png
-
3、找到要mock的接口，创建examples，填好要mock返回的结果，保存，选择mock环境，选择右边的小眼睛，点开会看到mock的域名url和x-apikey写进来，说明ok了
image.png
- 4、复制url，后面带上接口path，如：
https://4f94eeb2-5a4f-481a-a135-4d8db3660646.mock.pstmn.io/SuggestionNew
放在postman里面请求一下，即可看到mock返回，如果出错需要在headers里加一下x-api-key
image.png
mock数据的使用
-
数据mock完了，怎么用呢，用浏览器打开验证一下返回，会发现返回error，下图所示，而postman是ok的
image.png
是因为浏览器默认get请求方式，而我的接口是post请求，那怎么办呢，打开浏览器控制台console（更多工具-开发者工具），贴下面这段代码，把对应的url改成生成的mock地址，x-api-key对应value也替换成自己的key，这样就可以用这份数据来进行本地调试了，qa如果需要用的话也可以写个小脚本去调一下（当然我司是有自动化测试平台mock完了之后测试环境可共用，目前还不知道postman能不能强大到mock完了之后整个环境复用）。
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：创建mock server和examples的顺序是可以调换的，具体过程中遇到的问题找度娘大部分都可以解决，mark一下，有不当之处欢迎指正。
