怎么测试一个接口,postman?form?axios?

简介: 怎么测试一个接口,postman?form?axios?

怎么测试一个接口,postman?form?axios?


接口写出来之后,想要测试其正确性。最快速的方法莫过于postman,能脱离代码。当然前端还可以form表单提交或者利用axios。这里想说,当一个接口出来以后,根据其不同的content-type,三种测试方式也有很大不同。

先说说content-type

请求头和响应头总会有content-type,正如翻译内容类型,请求的时候表示body里的内容类型,响应的时候表示返回体里的内容类型。

get请求的时候没有body,参数是拼接在接口地址后面的,所以get请求的时候,没有content-type

post请求的时候,如果有body,接口肯定有content-type的值,而前端必须将请求头设置成相应的值,这样接口拿到正确的数据,不同的content-type,前后端处理的方法很多时候也是不同的。当然如果后端兼容处理这几种方式,那么测试更加随意了~~

content-type有很多类型,但是接口常用的是三种类型如下(如果有上传文件则只能用multipart/form-data):

  • application/json,此时前端传的body格式是{"a":1,"b":2}
  • application/x-www-form-urlencoded,此时前端传的body格式是a=1&b=2
  • multipart/form-data,此时前端传的body格式如下,每个表单项使用 --[boundary] 分割开来,最后一行使用 --[boundary]-- 结尾,下面对应的就是{name:'huahua',file:文件流,}
------WebKitFormBoundary6VWyGefevm60vjtn
Content-Disposition: form-data; name="name"
huahua
------WebKitFormBoundary6VWyGefevm60vjtn
Content-Disposition: form-data; name="file"; filename="study.md"
Content-Type: text/markdown
------WebKitFormBoundary6VWyGefevm60vjtn--

application/json

当接口规定需要的content-typeapplication/json

  • 代码里可以axios.post('/api/user',{a:1,b:2}),axios会将对象自动变成json对象之后,发送出去,content-type也会因为第二个参数是对象,而自动变成application/json,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = application/json
  • postman里,使用的时候,如下图:,这里postman也会因为你选择JSON,而自动设置Content-Type = application/json

这里弱弱的说下后台app.use(bodyParser.json())然后拿到的let {a,b} = req.body

application/x-www-form-urlencoded

当接口规定需要的content-typeapplication/x-www-form-urlencoded

  • 代码里可以axios.post('/api/user',Qs.stringify({a:1,b:2})),stringify会将其变成a=1&b=2,content-type也会因为第二个参数是字符串,而自动变成application/application/x-www-form-urlencoded,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = application/x-www-form-urlencoded,备注axios还可以在transformRequest处理,不细说了
  • 代码里还可以form元素自动提交<form method="post" action="/api/user"><input type="text" name="a"><input type="text" name="b"><button type="submit">提交</button></form>,这里不需要设置enctype,因为其默认值就是application/application/x-www-form-urlencoded
  • postman里,使用的时候,如下图:,这里postman也会因为你选择x-www-form-urlencoded,而自动设置Content-Type = application/x-www-form-urlencoded

这里弱弱的说下后台app.use(bodyParser.urlencoded({ extended: false }))然后拿到的let {a,b} = req.body

multipart/form-data

当接口规定需要的content-typemultipart/form-data时,分为两种情况:没有上传文件和有上传文件

没有上传文件的时候

  • 代码里可以let formData = new FormData();formData.append('a',1);formData.append('b',2);axios.post('/api/user',formData),axios会自动将其变成加边界的形式,content-type也会因为第二个参数是formData,而自动变成application/multipart/form-data,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = multipart/form-data,备注axios还可以在transformRequest处理,不细说了
  • 代码里还可以form元素自动提交<form method="post" action="/api/user" enctype="multipart/form-data"><input type="text" name="a"><input type="text" name="b"><button type="submit">提交</button></form>,这里必须设置enctype
  • postman里,使用的时候,如下图:,这里postman也会因为你选择multipart/form-data,而自动设置Content-Type = application/multipart/form-data

这里弱弱的说下后台let upload = multer();app.post('/formdata', upload.none(), (req, res)=> { let {a,b} = req.body;... }),没有文件加上upload.none()

有上传文件的时候

  • 代码里可以let formData = new FormData();formData.append('a',1);formData.append('avatar',xx.files[0]);axios.post('/api/user',formData),axios会自动将其变成加边界的形式,content-type也会因为第二个参数是formData,而自动变成application/multipart/form-data,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = multipart/form-data,备注axios还可以在transformRequest处理,不细说了
  • 代码里还可以form元素自动提交<form method="post" action="/api/user" enctype="multipart/form-data"><input type="text" name="a"><input type="file" name="avatar"><button type="submit">提交</button></form>,这里必须设置enctype
  • postman里,使用的时候,如下图:,这里postman也会因为你选择multipart/form-data,而自动设置Content-Type = application/multipart/form-data

这里弱弱的说下后台let upload = multer({ dest: 'uploads/' });app.post('/formdata', upload.single('avatar'), (req, res)=> { let file= req.avatar;let {a,b} = req.body;... }),文件暂存在uploads/multer的具体用法

参考文献

目录
相关文章
|
8天前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
48 11
|
1月前
|
JavaScript 前端开发 测试技术
Postman 如何进行性能测试?
Postman 如何进行性能测试?
104 1
|
1月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
65 3
|
3月前
|
JSON Java 数据格式
使用postMan调试接口出现 Content type ‘multipart/form-data;charset=UTF-8‘ not supported“
本文介绍了使用Postman调试接口时遇到的“Content type ‘multipart/form-data;charset=UTF-8’ not supported”错误,原因是Spring Boot接口默认只接受通过`@RequestBody`注解的请求体,而不支持`multipart/form-data`格式的表单提交。解决方案是在Postman中将请求体格式改为`raw`并选择`JSON`格式提交数据。
使用postMan调试接口出现 Content type ‘multipart/form-data;charset=UTF-8‘ not supported“
|
2月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
80 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
3月前
axios全局做节流,解决多次点击导致多次请求接口
本文介绍了如何在Axios请求中实现全局节流,以防止用户快速多次点击导致重复发送相同请求的问题。
85 2
|
2月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
49 0
|
2月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
36 0
|
3月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
268 7
Jmeter实现WebSocket协议的接口测试方法
|
3月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
286 3
快速上手|HTTP 接口功能自动化测试