API调试工具Talend API Tester的使用总结

前言

  在日常开发中,我们常常会用到API接口,尤其是在客户端与服务器之间进行数据交互时,更是显得尤为重要,在本博客中,我将使用实例记录API接口调试的过程,以用于后期遇到同样问题时更快的解决。

问题描述

  在之前其实也用到了第三方的API,第三方的API往往具备周全的说明文档,我们只需要按照文档对接口进行调用即可;但是在服务端和客户端都需要我们自己写时,往往会遇到一些问题。
  在本次女装商城(前面博客提到过)中,我们需要使用商品ID来获取商品的详细信息,如商品名称、当前价格、商品原价以及图片等等,在之前的课程中,我们是直接发起POST请求,而无需传递参数,所以没有遇到任何问题,但是在需要传递商品ID时,遇到了POST请求传递的参数在服务端接受不到的问题。

Talend API Tester介绍

  Talend API Tester是一款可以对API接口进行调试的谷歌浏览器插件,可以通过谷歌浏览器插件商城进行查找下载(由于众所周知的原因,需要一些工具进行操作,在本博客中不做详细说明)
  除此之外,导师另外还推荐了一款应用程Postman:https://www.postman.com/

具体使用方法类似,Talend API Tester是浏览器插件,我个人觉得方便一点,所以用的这一款,看个人喜好。

Talend API Tester

数据接口展示【Django】

在本次接口中返回的后台数据为:

class GoodDetailDataAPIView(View):
    """
    商品详情 数据接口
    """

    def post(self, request):  # post请求
        data_id = request.POST.get('goodId') # 接收数据
        print(data_id)                       # 打印接收数据
        print(request.POST)		     # 打印接收所有POST数据
        if data_id == '001':
            data = {
                'code': 0,
                'message': 'success',
                "data": {
                    "goodInfo": {
                        "amount": 10000,
                        "goodsId": "001",
                        "image1": BASE_RESOURCE_URL + 'goods/' + "001/cover.jpg",
                        "goodsSerialNumber": "6901435325888",
                        "oriPrice": 108.88,
                        "presentPrice": 98.88,
                        "shopId": "402880e860166f3c0160167897d60002",
                        "goodsName": "法国代购新款江疏影同款翻领修身中长裙春夏印花连衣裙",
                        "goodsDetail": '<img width="100%" height="auto" alt="" src="' + BASE_RESOURCE_URL + 'goods/' + '001/1.jpg" />' +
                                       '<img width="100%" height="auto" alt="" src="' + BASE_RESOURCE_URL + 'goods/' + '001/2.jpg" />' +
                                       '<img width="100%" height="auto" alt="" src="' + BASE_RESOURCE_URL + 'goods/' + '001/3.jpg" />' +
                                       '<img width="100%" height="auto" alt="" src="' + BASE_RESOURCE_URL + 'goods/' + '001/4.jpg" />' +
                                       '<img width="100%" height="auto" alt="" src="' + BASE_RESOURCE_URL + 'goods/' + '001/5.jpg" />'
                    }
                }
            }
       #    ...
       #    这里添加了6条数据,格式和上述的一样       
       #    if语句里分别是 == '002', '003', '004'... 

        else:
            data = {
                'code': 0,
                'message': 'success',
                "data": {}
            }
        # 返回JSON数据
        return JsonResponse(data, safe=False)

接口url为:http://127.0.0.1:8000/shop/getGoodDetail

接口调试

  1. 点击谷歌浏览器右上角插件Talend API Tester,弹出Talend API Tester界面,点击左下角添加项目
    添加项目

2. 输入项目名称,并点击创建 ![添加项目](https://halo-1252030657.cos.ap-chengdu.myqcloud.com/blog/image_1586094638042.png)
3. 添加一个新的request ![image.png](https://halo-1252030657.cos.ap-chengdu.myqcloud.com/blog/image_1586157204974.png) 这里出现了一些问题,我常规的认为只需要在默认的request上修改请求方法为POST,然后在下方添加参数就可以了,但是,在返回结果中,没有得到我想要的数据。

接口调用

  配置好API请求后,开始调用,但是在返回结果中,没有得到正确的数据。
返回结果

原因分析:,可能是POST未接收到正确的参数,为验证这一结果,在控制台查看服务运行情况。

image.png

控制台果然没有打印接收到POST参数,这里就分析可能是HEADERS的问题。

image.png


查阅资料:
text/html  :HTML格式
text/plain :纯文本格式      
text/xml   :XML格式

image/gif  :gif图片格式    
image/jpeg :jpg图片格式 
image/png  :png图片格式

application/xml     : XML数据格式
application/json    : JSON数据格式
application/pdf     : pdf格式  
application/msword  : Word文档格式
application/octet-stream : 二进制流数据(如文件下载)

application/x-www-form-urlencoded : 

<form encType="">中默认的encType,
form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)。
服务器收到的raw body会是,name=aaa&key=bbb。

multipart/form-data : 表单上传文件

资料来源于https://blog.csdn.net/luyu13141314/article/details/8112906


到这里就比较熟悉了,比如常见的前端Form表单直接上传文件时需要在form标签中添加enctype="multipart/form-data"属性;


再比如导师写的某接口文档里说明里的
image.png


以及在本门课程学习中遇到的

Future request(url, {formData}) async {
  try {
    Response response;
    Dio dio = new Dio();
    // 配置contentType
    dio.options.contentType =
        ContentType.parse('application/x-www-form-urlencoded').toString();
    if (formData == null) {
      response = await dio.post(servicePath[url]);
    } else {
      response = await dio.post(servicePath[url], data: formData);
    }
    if (response.statusCode == 200) {
      return response;
    } else {
      throw Exception('后端接异常,请检查测试代码和服务器运行情况...');
    }
  } catch (e) {
    return print('error:::$e');
  }
}

修改Content-Type为application/x-www-form-urlencoded
Content-Type为application/x-www-form-urlencoded
控制台打印


问题依然没有解决,这时候经过了很长时间的调试,然后我认为可能是参数的问题,经过反复尝试,终于发现了问题。

发现问题

这里还有个form,可以用来添加参数,我就试了一下
获取数据成功

问题总结

  该问题的产生是自己对接口调试的不熟悉产生的,那么为什么使用POST请求时将参数填写在上面的位置不可以,但是填写在body位置可以,或者说为什么GET请求可以,POST会出现问题呢?

答:Params处设置的变量请求时会将参数放在url后通过?传参(有点像GET方法传参数),而Body里设置的参数则是接口真正请求时发的参数。

# Django  Flutter  API  工具 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×