大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡

简介: 大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡

大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡

背景

前端开发接口请求,调试,联调,接入数据,前端必不可少工具,postman是一个非常好用的工具。

实战开始

这是官网, 登录下载和安装就不用讲了吧,这个比较easy,然后对于api的接口请求,主要有以下方式,基础知识放这给大家看下

API接口主要的请求方式

API 请求的主要方式包括以下几种:

  1. GET 请求:
  • 用于从服务器获取数据。
  • 请求的数据通常附加在 URL 后面。
  • GET 请求是幂等的,意思是无论调用多少次,结果都是相同的。
  • 示例:
GET /api/users
  1. POST 请求:
  • 用于向服务器发送数据,通常用于提交表单或上传文件。
  • 数据通常在请求体中发送。
  • POST 请求可能会改变服务器的状态,因此不是幂等的。
  • 示例:
POST /api/users
        {
          "name": "John Doe",
          "email": "john.doe@example.com"
        }
  1. PUT 请求:
  • 用于更新服务器上的数据。
  • 数据通常在请求体中发送。
  • PUT 请求是幂等的,意思是无论调用多少次,结果都是相同的。
  • 示例:
PUT /api/users/1
        {
          "name": "John Doe",
          "email": "john.doe@example.com"
        }
  1. DELETE 请求:
  • 用于从服务器删除数据。
  • DELETE 请求是幂等的,意思是无论调用多少次,结果都是相同的。
  • 示例:
DELETE /api/users/1
  1. PATCH 请求:
  • 用于更新服务器上的部分数据。
  • 数据通常在请求体中发送。
  • PATCH 请求不是幂等的,意思是结果可能会因多次调用而不同。
  • 示例:
PATCH /api/users/1
        {
          "email": "john.new@example.com"
        }
  1. OPTIONS 请求:
  • 用于请求服务器支持的通信选项和功能。
  • 通常用于跨域请求的预检。
  • 示例:
OPTIONS /api/users

打开postman 熟悉下

左边collections 你可以当成文件夹,以下是基础知识

左侧请求部分:

  1. Collections:
  • Collections 是组织相关 API 请求的集合,类似于文件夹的概念。你可以根据项目、模块等将请求归类到不同的 Collection 中。
  1. Environments:
  • Environments 是存储环境变量的地方,方便在不同环境(如开发、测试、生产)之间切换。例如,API 基础 URL、身份验证令牌等可以作为环境变量存储。
  1. History:
  • History 列表显示了你最近执行过的请求,便于快速访问和重新执行之前的请求。
  1. APIs、Workspaces:
  • APIs:提供了一个地方来定义和管理你的 API,并提供文档化功能。
  • Workspaces:可以将相关的 Collections、Environments 和团队成员组织在一起,方便协作。

我们新建一个test,然后新建这个短信请求test

然后我们看看右侧的基础知识先,

右侧请求部分:

右侧是实际发送和查看请求的地方。主要包括以下部分:

  1. Request URL:
  • 输入请求的完整 URL,包括协议、域名、路径和查询参数。
  1. Request Method:
  • 选择请求方法,如 GET、POST、PUT、DELETE、PATCH 等。
  1. Params:
  • 查询参数,可以在 URL 中添加键值对,常用于 GET 请求。
  1. Authorization:
  • 设置请求的身份验证信息,如 Bearer Token、Basic Auth 等。
  1. Headers:
  • 设置请求头部信息,如 Content-Type、Authorization 等。
  1. Body:
  • 设置请求的主体内容,常用于 POST、PUT 请求。可以选择不同的格式,如 raw(JSON、XML)、form-data、x-www-form-urlencoded 等。
  1. Tests 和 Pre-request Script:
  • Tests:可以编写测试脚本来验证响应结果。
  • Pre-request Script:可以编写预请求脚本来准备和修改请求参数。
  1. Send 按钮:
  • 点击 Send 按钮发送请求,并在右下角显示响应结果,包括状态码、响应头、响应体等。

ok 基本理论清楚以后,我们实战开始

以简单实战接口测试

先以最近我们api大数据一个简单的月经周期计算来测试,这个大意就是发送最后月经开始日期,和平均月经周期可以预测下次来月经的时间。

接口地址: https://api.youyacao.com/api/yuejing

返回格式: JSON

请求方式: GET

请求示例: https://api.youyacao.com/api/yuejing?lastPeriodStart=2023-12-31&cycleLength=8

请求参数说明:

名称

必填

类型

说明

lastPeriodStart

date

最后一次月经开始日期

cycleLength

int

平均月经周期长度(天)

返回参数说明:

名称

类型

说明

返回示例:

示例

{
    "code": 200,
    "msg": "success",
    "data": {
        "nextPeriodStart": "2024-01-28",
        "ovulationStart": "2024-01-14",
        "ovulationEnd": "2024-01-18"
    }
}

那么这个就很简单啊,我们添加地址,方式选get

https://api.youyacao.com/api/yuejing

根据基础知识我们需要填写的参数lastPeriodStart和cycleLength ,一个是date类型,一个是int类型,好基础知识又在下面了,

基本数据类型:

  1. 整型(Integer):
  • int: 表示一个整数,例如 -3、0、42。
  • short: 短整型,表示范围较小的整数。
  • long: 长整型,表示范围较大的整数。
  • byte: 字节型,表示更小范围的整数,通常用于存储二进制数据。
  1. 浮点型(Floating Point):
  • float: 单精度浮点型,表示小数,例如 3.14。
  • double: 双精度浮点型,表示更精确的小数。
  1. 字符型(Character):
  • char: 表示单个字符,例如 ‘A’、’中’。
  1. 布尔型(Boolean):
  • boolean: 表示真(true)或假(false)值。

复杂数据类型:

  1. 字符串(String):
  • 表示一串字符,例如 “Hello, World!”。在大多数编程语言中,字符串属于复杂数据类型。
  1. 数组(Array):
  • 表示相同数据类型的集合,例如 int 数组、String 数组。

数据库特定数据类型:

  1. 日期和时间(Date and Time):
  • date: 表示日期,例如 ‘2025-02-11’。
  • time: 表示时间,例如 ‘14:30:00’。
  • timestamp: 表示日期和时间,例如 ‘2025-02-11 14:30:00’。
  1. 文本(Text):
  • varchar: 可变长度字符型,用于存储字符串。
  • text: 长文本型,用于存储较长的字符串。
  1. 二进制(Binary):
  • blob: 二进制大对象,用于存储二进制数据,例如图片、视频。

根据基础知识,那么我们假设,date上次来是2025年1月11日, int类型是整数,比如8天,因此我们是不是得填写

2025-01-11 和 8

点击send 一请求,我们得到了数据

我们需要在row中勾选格式,我们需要json格式,我们勾选raw 然后选择json格式

ok 成功得到我们返回的预测接口信息, 通常状态码 200表示 成功, 这里看到预测 下次月经开始时间为1月19日,开始时期1月13日,结束日期1月17日,好像有点不太准啊,你们试试吧。

{
    "code": 200,
    "msg": "success",
    "data": {
        "nextPeriodStart": "2025-01-19",
        "ovulationStart": "2025-01-13",
        "ovulationEnd": "2025-01-17"
    }
}

那么针对row 格式里面这些种类,具体是什么意思呢,这里基础知识奉上。

1. raw 格式:

  • JSON:
  • 用于发送 JSON 格式的数据。
  • 适合 RESTful API 的请求和响应。
  • 示例:

json

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}
  • XML:
  • 用于发送 XML 格式的数据。
  • 常用于 SOAP API 或需要 XML 格式的请求。
  • 示例:

xml

<user>
  <name>John Doe</name>
  <email>john.doe@example.com</email>
</user>

2. form-data 格式:

  • 用于发送包含文件和非文件字段的数据。
  • 每个字段都可以有自己的 Content-Type。
  • 常用于文件上传。
  • 示例:

plaintext

Content-Disposition: form-data; name="name"
John Doe
Content-Disposition: form-data; name="email"
john.doe@example.com
Content-Disposition: form-data; name="file"; filename="example.txt"
Content-Type: text/plain
This is an example file.

3. x-www-form-urlencoded 格式:

  • 用于发送键值对,数据会被编码为 key1=value1&key2=value2 的格式。
  • 类似于 URL 查询参数,但在请求体中发送。
  • 适合表单提交的数据。
  • 示例:

plaintext

name=John+Doe&email=john.doe%40example.com

4. 其他 raw 格式:

  • Text: 发送纯文本数据。
  • 示例:

plaintext

This is a plain text request body.
  • HTML: 发送 HTML 格式的数据。
  • 示例:

html

<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

5. binary 格式:

  • 用于发送二进制数据,如文件的字节流。
  • 适合发送非文本文件,如图像、视频等。

选择合适的格式:

  • 根据 API 要求选择合适的格式来发送请求数据。
  • JSON 和 form-data 是常见的选择,JSON 适合发送结构化数据,form-data 适合包含文件的请求。

总之本文目的已达成,前端开发必须可少学习接口请求测试。

目录
相关文章
|
XML 前端开发 测试技术
如何使用 Postman 发送 POST XML 请求?
使用 Postman 发送带有 XML 数据的 POST 请求。我们将引导您完成将 XML 数据有效发送到 Web 服务或 API 的步骤,使处理这种常见数据格式变得简单易行。
|
XML JSON API
掌握 Postman:高级 GET 请求技术与响应分析
本指南详细讲解了如何在 Postman 中发送 GET 请求并解析 API 响应,帮助开发者提升 API 测试与开发能力。Postman 是一款强大的工具,可简化请求发送和响应分析流程,并支持团队协作及多版本管理。通过创建集合、配置请求参数、设置身份验证与请求头等步骤,开发者能够高效测试 API。同时,理解响应体、Cookie、响应头等内容有助于深入分析 API 行为,确保高质量的软件交付。掌握 Postman 不仅提高效率,还能加深对 Web 通信机制的理解。
|
前端开发 测试技术 API
2025年API开发必备:10款优秀Postman替代工具大盘点
API测试在现代开发中至关重要,Postman虽为首选,但市场上涌现出许多优秀替代工具。本文精选2025年10款好评如潮的API测试工具:Apifox、Insomnia、Hoppscotch、Paw、Talend API Tester、HTTPie、ARC、Swagger UI、SoapUI和Thunder Client。这些工具各具特色,满足不同需求,如团队协作、开源易用、自动化测试等。无论是简洁轻量还是功能全面,总有一款适合你的团队,助力效率提升。
8852 122
|
JSON 测试技术 API
优化你的 REST Assured 测试:设置默认主机与端口、GET 请求与断言
REST Assured 是一个强大的 Java 库,用于简化 RESTful API 测试。本文详解了其核心功能:设置默认主机和端口以减少代码重复、发起 GET 请求并验证响应结果,以及通过断言确保接口行为符合预期。同时推荐 Apipost 工具,助力开发者提升 API 测试效率,实现更高效的接口管理与团队协作。掌握这些技巧,可显著优化测试流程与代码质量。
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
1159 11
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
1130 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
2266 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
运维 Cloud Native Java
postman发起post请求遇到报错:java.io.FileNotFoundException (文件名、目录名或卷标语法不正确。)
遇到bug报错,多猜可能的原因,控制变量反复测试,直至找到问题的关键,然后再思考如何解决或者回避。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
|
Web App开发 Java 测试技术
Postman:Postman简介、安装、入门使用方法详细攻略(一)
Postman:Postman简介、安装、入门使用方法详细攻略
Postman:Postman简介、安装、入门使用方法详细攻略(一)

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1352
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    630
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    496
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    491
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    598
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    786
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1543
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    356
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1254
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    601