接口设计之响应式

转发原文：https://mp.weixin.qq.com/s/ALt_XbU4kGRyK9lgM1qS1w

一、什么是响应式？

从前端的角度来看，所编写的一套代码，能够兼容任意的客户端界面，如H5、PC端、小程序等，不会再像过去那样，PC端需要写一套代码，H5写一套代码，小程序也写一套代码。这样一套做法，前端也称之为响应式设计。

从后端的角度来看，响应式主要指的是接口的请求-响应。而接口的请求-响应可分为很多，例如一次请求，全部吐出、多次请求、不同吐出。

今天着重讲的后端接口设计响应式。至于前端的响应式，如今的三大框架均可以做到(Vue.js、React.js、Angular.js等)。

二、我对接口响应式的思考

过去在做智能酒店系统接口开发、智能门锁系统接口开发、编程教育平台接口开发、共享洗浴间平台接口开发、魔改系统等，用到的最多就是响应式接口，响应式接口最直接的表现形式就是根据接口传参决定具体数据的吐出，换句话说，叫做按需取数据，即按照需要吐出对应的数据。这样一来，能够提高接口在网络传输中的效率，不会表现出要过2~3s或者是3~5s左右接口才能正常吐出数据来。
但是这样一来也会出现一个问题，接口会比较多。记得曾读过一本书叫《高性能网站建设指南》，该书关于网站高性能方面提供了14个建议:

• (1)减少HTTP请求；

• (2)使用CDN；

• (3)添加expires头；

• (4)压缩组件；

• (5)将样式表放在顶部；

• (6)将脚本放在底部；

• (7)避免CSS表达式；

• (8)使用外部JavaScript和CSS；

• (9)减少DNS查找；

• (10)精简JavaScript；

• (11)避免重定向；

• (12)删除重复脚本；

• (13)配置ETag；

• (14)使Ajax可缓存。

其中减少HTTP请求与接口响应式是存在一定的冲突的，从前端的角度上体现，减少接口请求、减少图片请求、减少JavaScript/CSS请求等，在一定程度上降低他们的工作时间成本，提高工作效率。但是对于后端来说，以接口请求为例，如果在一个页面只请求一个接口，一个接口里面包含大大小小十几key-value数据，这样一来，接口将可能非常缓慢，甚至如果该接口中某一个地方报错了，将可能影响到其它接口的正常运行，最终导致前端无法展示数据，造成系统的不可用。

从我个人的实践经验来看，接口响应式和非接口响应式的做法应在实际中同时并行。去年的实践经验证明完全靠一个接口搞定一个界面所有的数据展示是完全行不通的。接口响应式的适用场景在于一次性吐出的数据非常庞大，非常庞大数据量会急剧消耗系统的性能，由此，针对这样的情况结合对应的业务场景采用响应式接口做法。非接口响应式的适用场景在于吐出的数据是有限，这个有限指数据也就在几万以内，针对这样的数据，可以一次性吐出来，由前端进行处理。不过这里面涉及到一点，不论是接口响应式还是非接口响应式都需要与前端沟通，因为前端拿到接口的数据以后，是需要渲染的，渲染它有一定的顺序和规律。