![4ca2dc8ad71498293f50da0b534c8f28.png](https://i-blog.csdnimg.cn/blog_migrate/bce54d53ea9889541292346df50fd3e8.jpeg)
你有没有遇到过这种情况:
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啦。如下图:
![723a1ea92834c3f2d5c4d5e07c3f6521.png](https://i-blog.csdnimg.cn/blog_migrate/be041c999ff916d5ef5d3a6e058e7631.jpeg)
小结:一般情况下可以通过接口错误码去查看是哪端的问题,如果错误码不为0应该是后端的问题,否则是前端的bug。但是有些bug通过接口返回码也是看不出来的,即使返回码为成功,后台也有可能有隐藏的逻辑错误。(备注:返回码的定义可能因功能和开发而异,比如返回码为2,可能是别的业务含义,不过一般返回码为0都表示成功)
四、如何通过接口思考产品功能
如果你需要通过一份接口文档来规划产品功能:
1、首先要看文档提供了哪些接口功能,你想要但是不存的接口功能就需要去和开发沟通协商了。
2、其次是看每个接口里面的入参,是否都有数据源存在,比如一个要给公众号特定的人群发模版消息的接口,是需要openid作为参数的,那openid是否已经存在我们的库中,或者有没有其他方式去获取。
3、最后看接口的返回参数,要清楚接口返回了哪些字段,可能你的需求里面需要某个字段,但是接口里面没有返回,这时可以去和开发沟通是否支持某个字段返回。
更多技术好文欢迎关注我的公众号:产品的技术小课