你有没有遇到过这种情况：

1、发现线上有bug时，不知道是前端的问题，还是后端的问题？

2、需要通过一份《接口文档》设计产品功能，不知道如何思考？

3、好奇前端和后端是如何通信的？

下面将一一讲解。

本文目录：

1、什么是接口？

2、接口的组成

3、如何判断bug是哪端的问题

4、如何通过接口思考产品功能

一、什么是接口？

接口是后端设计的一套供给第三方使用的方法。(第三方指前端/后端)

接口通过网络协议来调用，我们最常用的协议是HTTP协议。

在定义一个接口时，会写好接口路径和接口方法名的映射，然后前端通过接口路径来调用方法。

举个例子：一个获取商品列表的接口，接口路径是：/api/getMerchantList，接口方法名是：getMerchantList。前端通过请求/api/getMerchantList来调用getMerchantList方法，接着后端会做相关逻辑处理，比如查询数据库，最后返回商品数据。

小结：前端通过请求接口路径来和后端通信。但是需要注意的是像这种通过一个http请求接口来通信的方式是单向的，比如只能前端主动发起请求和后端通信，后端不能主动发起请求和前端通信。如果后端想主动和前端通信，可以通过双向通信协议websocket来通信，现在很多聊天工具，都是使用该协议来双向通信的。

二、接口的组成

一份规范的接口文档，一般是由以下几部分组成：

接口路径: /api/getMerchantList
接口描述：获取商品列表
请求类型：get
请求参数：
{
page:1, // 第几页
pageSize:20, // 一页有多少条数据
name:'薯片',// 商品名字，为空表示查全部
}
返回结构：
{  code:0,// 返回码  data:{    list:[     {name:'乐事薯片', // 商品名称     price:13 // 商品价格 }   ]
},
message:'success' //错误信息
}

小结：请求类型指的是http协议的请求方法，最常用的是post/get，一般查询数据类的接口使用get类型，操作数据增删改类的接口使用post类型。

请求参数是后台规定好前端需要传的参数结构，比如前端想要第二页的数据，那传一个 page:2 给后端就可以了。

返回结构是后台规定好返回给前端的数据结构，一般的返回结构包括三个部分：返回码、错误信息、正确数据。通过返回码可以让前端知道后端逻辑是否出现错误，比如返回码为0表示成功，返回码为500表示服务器错误。如果返回码不为0 ，前端就可以直接提示错误信息告知用户接口出错了。

三、如何判断bug是哪端的问题

通过上面的讲解，大家都知道了后端接口出错可以通过返回码来判断，所以一般情况下，判断bug是哪端的问题，直接看返回码就可以了。建议使用chrome的开发者工具查看，鼠标右键选择检查/按下键盘F12会弹出一个开发者工具，然后选择network，会看到很多接口请求，找到请求接口，查看对应的错误码就ok啦。如下图：

小结：一般情况下可以通过接口错误码去查看是哪端的问题，如果错误码不为0应该是后端的问题，否则是前端的bug。但是有些bug通过接口返回码也是看不出来的，即使返回码为成功，后台也有可能有隐藏的逻辑错误。(备注：返回码的定义可能因功能和开发而异，比如返回码为2，可能是别的业务含义，不过一般返回码为0都表示成功)

四、如何通过接口思考产品功能

如果你需要通过一份接口文档来规划产品功能：

1、首先要看文档提供了哪些接口功能，你想要但是不存的接口功能就需要去和开发沟通协商了。

2、其次是看每个接口里面的入参，是否都有数据源存在，比如一个要给公众号特定的人群发模版消息的接口，是需要openid作为参数的，那openid是否已经存在我们的库中，或者有没有其他方式去获取。

3、最后看接口的返回参数，要清楚接口返回了哪些字段，可能你的需求里面需要某个字段，但是接口里面没有返回，这时可以去和开发沟通是否支持某个字段返回。

更多技术好文欢迎关注我的公众号：产品的技术小课