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/07/31