【jquery Ajax】接口的学习与 Postcode 插件的使用
接口
接口的概念
使用 Ajax 请求数据时,被请求的 url 地址,就叫做数据接口(接口),同时,每个接口必须有请求方式,
分析接口的请求过程
通过 GET 方式请求接口的过程


编辑
通过 post 方式请求接口的过程


编辑
接口测试工具
什么是接口测试工具
为了验证接口能否被正常访问,我们常常需要使用接口测试工具,来对数据接口进行检测。
接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。
安装 Postcode
postman 安装包臃肿,而且 Postman 还收费,免费版本也不支持一些功能。关键有些功能完全用不到,还占地方,推荐一个 vscode 插件,叫做 postcode。


编辑
安装失败的话,会提示手动安装,手动安装再导入也可以,


编辑
使用 postcode 测试 get 接口
步骤
选择请求的方式
填写请求的 URL 地址
填写请求的参数
点击 Send 按钮发起 GET 请求
查看服务器响应的结果。


编辑
使用 postcode 测试 post 接口
步骤
选择请求的方式
填写请求的 URL 地址
选择 Body 面板并勾选数据格式
填写要发送到服务器的数据
点击 Send 按钮发起 POST 请求
查看结果


编辑
提交数据 要选择 body 里的


编辑格式进行提交。
接口文档
什么是接口文档
接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据,好的接口文档包含了对接口 URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。
接口文档的组成部分
接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下六项内容,从而为接口的调用提供依据。
接口名称:用来标识各个接口的简单说明,如何登录接口,获取图书列表接口等
接口 URL: 接口的调用地址。
调用方式: 接口的调用方式 如 GET 或 POST。
参数格式:接口需要传递的参数,每个参数必须包含参数名称,参数类型,是否必选,参数说明这四项内容。
响应格式:接口的返回值的详细描述,一般包含数据名称,数据类型,说明三项内容。
返回示例(可选):通过对象的形式,列举服务器返回数据的结构。
接口文档示例


编辑
响应格式


编辑
返回示例


编辑
评论