API管理与调试使用教程

简介

启动API管理

  1. 在YonStudio开发工具中新建或导入项目（如果不导入，点击API将弹出错误提示信息）
  2. 点击YonStudio开发工具左侧竖列菜单的「API」图标按钮，可启动进入「API管理」界面

image-1

面板功能区介绍

image-1

image-2

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

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

创建API

创建API的方式两种：

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

    image-3

    image-4

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

    image-5

    image-4

注意事项：

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

    image-6

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

删除API/分类

  • 删除API：选中要删除的API，对应的API右侧会出现"..."按钮，鼠标移入右侧"..."，会弹出相应操作面板，点击删除，会弹出二次确认框以免误操作，点击删除按钮，即可成功删除

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

    image-7

    image-8

查看/修改API配置

修改API配置信息

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

image-9

如图为API基础配置：

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

request配置面板

  1. image-10query配置面板，在每一列配置需要的query参数，在发送请求时会以query的形式携带参数
  2. image-11header配置面板，输入相应的配置，会在发送请求时配置到header中
  3. image-12配置body请求体，在相应的请求方式下配置请求体，会根据所选请求类型，在body中携带配置好的参数

response响应面板

  1. image-13主要用于查看API返回数据，可根据自己偏好选择格式化后的数据或是返回的原始数据，右侧下拉选项为格式化的依据
  2. image-14查看response响应的header信息

修改API名称

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

配置变量

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

image-15

image-16

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

image-17

生成API代码

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

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

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

  • config.js文件：主要保存在API调试时配置的变量信息

  • req.js：该文件是对请求方法的封装

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24