番外篇之自定义前端接口

自定义前端接口工具 RAP.jpg

• 请问：你在开发时，后端还没有完成数据输出，我们前端是不是只能写静态模拟数据？
• 请问：然后将模拟数据写在 JS 文件里，数据是不是太长了？
• 请问：写模拟数据是不是太累，需要收集很多的资源：图片、地址、随机数、IP 等等？

那小老弟就先来介绍下 Mock.js ，它可以做什么（对传统前端来说）：
根据数据模版生成模拟数据。
模拟 AJAX 请求生成并返回模拟数据。
基于 HTML 模版生成模拟数据。

RAP通过GUI工具帮助WEB工程师更高效的管理接口文档，同时通过分析接口结构自动生成Mock数据、校验真实接口的正确性，使接口文档成为开发流程中的强依赖。有了结构化的API数据，RAP可以做的更多，而我们可以避免更多重复劳动。

---

• OK！了解了 Mock.js 的机制后，是不是想知道具体是怎么玩的？那就要说今天的重头戏：RAP了（额，我说的 RAP 可不是代表说唱的意思），具体是什么看下面的截图就行：

你应该知道的 RAP .png

• 那么毫无疑问自己需要自己注册个账号（像上图右上角），然后再导航栏中的团队模块建立自己的团队（下图是我创建的团队）：

创建团队.png

• 创建完团队以后，点击进入我的主页，创建自己的项目（同样如下图）：

创建项目.png

• 然后点击进入，进行编辑自己的接口：

自定义编辑接口.png

TIP：

1. 请求的参数列表和响应参数列表都是自定义的；可以看到变量名、含义、类型、备注（具体语法，可以看 Mock.js 文档）。
2. 通过自己编辑，可以多了解下后台接口的知识，很多东西我自己也是凑出来的。。。其中关于有个 data|10 的变量名（10 表示能随机生成 10 条数据），调过接口的同学都知道里面通常是个json对象的集合，里面有各种子变量： { key : Value } 的键值对，也自定义。
3. 其中变量名：thumb，是定义的图片，在后面备注中：是定义图片的规格大小，以及随机生成的颜色样式。

• 编辑完然后点击秒存后，点击接口详情左侧的播放标识后，并输入 accessToken 后如下图：

输出数据.png

• 上图就是随机生成的 10 条数据，而右下角 3 request staring,url：后面的就是我地址，点击它可以看到这是个对象，但是我直接在控制台输出 Mock.mock ( 这个对象 )，发现报错：Mock is not defined，很明显没有 Mock 这个方法，于是我又去 Mock.js 网页下打开控制台，重新一样操作了下，咦，可以了。。。具体情况如下图：

Mock is not defined.png
正常显示.png

• OK，通过上图可以看出来随机生成的对象需要经过 Mock.mock ( ) 处理后就可以转换成我们平时需要的 json 对象，那么我需要在RN中使用Mock，于是我要安装Mock.js，输入命令：npm i mockjs --save 后，就可以在 package.json 中看到 Mock.js 了，如下图：

package.json.png

• 现在的话，我只需要用网络请求的 fetch 方法，把我之前生成的 url 传进去就行了，下图是我 fetch 请求的代码：

fetch 请求.png

遇到的小坑：

• 在 IOS 9 应用通讯安全策略进行了升级，已不再支持 http （可以看出我的 url 就是 http ）这种不安全的协议了（至于为什么 http 不安全，科普下：http 是超文本传输协议，信息采用明文传输，而 https 则使用 SSL 加密传输协议进行传输），既然服务器的链接并不是我们前端所能决定的，如果一定要发送 http 协议的请求，可以修改当前项目的 info.plist 文件来实现：

解决方式.png

• 现在的话，reload 以后可以在控制台上看到数据了：

输出数据.png

• 但是，你以为这样就结束了？NO，第二个坑来了，获取到数据是没错，但是我发现 数据里的 thumb 图片显示不出来，我同样直接把这个 thumb 后的 value 直接去搜，发现能显示出页面，这就说明这图片是有用的，难道是请求慢？没能很快的加载出图片？有这个可能，于是我就等一会，麻痹，等了10分钟都不出来，这就肯定不是慢的问题了。。。最终我解决方法是打开 XCode build 后就可以渲染出图片了（我之前是输命令 react-native run-ios 起的模拟器），你要问我为什么，我只能说可能需要原生 build 支持下，图片才被支持吧。。。具体效果看下图：

动态效果图.gif

• 那到这里其实已经可以结束了，但是我还要分享我找到的一个关于 HTTP类型 知识点（以下内容不是我的领域，具体说什么我也不懂，我只是照抄。。。）：

我之前所 解决 http 请求的方法只是建立在所访问的请求是 HTTP 类型的基础上，那么一劳永逸的方法就是服务端升级使用 TLS 1.2 SSL 加密请求的 HTTPS 协议（服务器已支持 TLS 1.2 SSL，但 IOS9 上还是不行，还要进行链接里的适配操作。那是因为：ATS只信任知名 CA 颁发的证书，小公司所使用的 self signed certificate，还是会被 ATS 拦截，对此，建议使用链接中给出的 NSExceptionDomains，并将你们公司的域名挂在下面。）

参考：RAP 参考资料