APICloud Studio3 API管理与调试使用教程

简介

面板功能区介绍

165078101511

165078111311

根据途中红色数字编号，对应功能如下：

1. API、请求变量定义面板切换
2. 搜索框与新增按钮
3. API列表（列表中的每个文件夹称为一个分类）
4. 根据API生成代码
5. API详情、从左至右依次为请求method、url与发送请求按钮
6. request区域
7. response区域
8. 变量配置面板

创建API

创建API的方式两种：

1. 通过搜索框右侧"+"按钮创建：将鼠标移入按钮会弹出操作面板，点击新建API方法，会弹出编辑API名称弹窗，输入API名称点击"确定"即可在对应的分类下成功创建

image-20220424145152922

image-20220424145240875

1. 通过分类右侧"..."按钮创建：选择一个分类后，对应分类右侧会出现"..."按钮，鼠标移入右侧"..."按钮会弹出操作面板，点击新建API方法，会弹出编辑API名称弹窗，输入API名称点击"确定"即可在对应的分类下成功创建

image-20220424145336802

image-20220424145240875

注意事项：

1. 在没有分类的情况下，需要先通过搜索框右侧"+"按钮创建分类，然后即可进行正常的API创建流程

image-20220424153023125

1. 通过搜索框右侧"+"按钮创建的API会默认创建到当前选中的分类下

删除API/分类

• 删除API：选中要删除的API，对应的API右侧会出现"..."按钮，鼠标移入右侧"..."，会弹出相应操作面板，点击删除，会弹出二次确认框以免误操作，点击删除按钮，即可成功删除
• 删除分类：选中要删除的分类，对应的分类右侧会出现"..."按钮，鼠标移入右侧"..."，会弹出相应操作面板，点击删除，会弹出二次确认框以免误操作，点击确定删除按钮，即可成功删除。若改分类下存在API，需要先删除所有分类内的API才可以删除该分类

image-20220424154531753

image-20220424154600285

查看/修改API配置

修改API配置信息

选中需要调试或修改的API，在右侧API操作面版可以看到当前API的请求信息、请求参数，点击发送按钮，即可看到当前配置的响应详情

image-20220425104053451

如图为API基础配置：

1. 设置请求类型，点击下拉选择相应的请求类型
2. 请求地址，输入相应的API请求地址
3. 发送请求按钮，当配置完请求参数，点击即可发送请求获得响应

request配置面板

image-20220425104453145

query配置面板，在每一列配置需要的query参数，在发送请求时会以query的形式携带参数

image-20220425104615363

header配置面板，输入相应的配置，会在发送请求时配置到header中

image-20220425104911330

配置body请求体，在相应的请求方式下配置请求体，会根据所选请求类型，在body中携带配置好的参数

response响应面板

image-20220425105107547

主要用于查看API返回数据，可根据自己偏好选择格式化后的数据或是返回的原始数据，右侧下拉选项为格式化的依据

image-20220425105610217

查看response响应的header信息

修改API名称

选中要编辑的API，对应的分类右侧会出现"..."按钮，鼠标移入右侧"..."，在弹出的操作面板中选择重命名，输入想要修改的名称点击确定即可

配置变量

点击变量tab按钮，切换到变量操作面板，在面板中以Key，Value的形式配置全局变量，在API调用的时候，使用{Key}的形式即可使用配置好的变量。如下图

image-20220425113318556

image-20220425113351453

注：变量值不能引用变量，如下，是错误的

image-20220425113722710

生成API代码

点击分类列表下面的"生成API代码"按钮，即可根据现有的API在根目录下的apiModel文件夹中自动生成可用代码，其中包含三个文件，分别是apiModel.js、config.js和req.js

• apiModel.js文件：生成API对应的方法，在项目中使用，直接引入该文件，按调试时定义好的API名为函数名称调用即可

image-20220426144539854

如图，①为引用文件，②调用生成的API方法，③结果打印，证明调用成功

• config.js文件：主要保存在API调试时配置的变量信息
• req.js：该文件是对请求方法的封装