HTTP基础知识以及请求流查看

154 阅读5分钟

http请求

从客户端发起请求到服务端请求数据的过程称为http请求

团队协作的基本流程

  1. 评审阶段: 产品召集前后端进行需求评审,前后端捋清楚任务量以及需求实现问题点
  2. 开发时间评估阶段: 开发人员进行工作量评估,最小单位0.5人/天,工时评估必须在了解业务的情况下严谨的评估
  3. 接口定义阶段: 通过原型图和需求文档进行接口定义,编写API文档

    生成、描述、调用和可视化RESTful风格的文档:swagger-ui、yapi等; 下图展示了swagger基本使用:

  • 接口列表: b2b-order-service,订单相关接口集合

  • 接口详情: 包括请求方式(GET,POST,PUT,DELET)、请求地址、请求参数、返回数据格式、字段描述

    • 请求方式: 在浏览器中的字段Request Method

      1. GET: 获取资源信息,请求参数放在url的?之后,有长度限制(1024字节)
      2. POST: 传输内容实体,就是客户端将服务器需要的参数告诉给它,参数可以在url后面传递,也可以在body中传递,一般无长度限制

      3.PUT: 传输文件

      1. DELET:删除文件
    • 请求地址: 前端请求对应数据的地址,如授信支付接口地址:请求域名 + 服务地址 + /api/payment/credit

    • 请求参数: 服务端所需要的参数,由客户端传递;形式分为:url后和body中两种

      请求数据传递错误则是前端问题

    • 返回数据: 服务器返回给客户端的数据,以最合理的方式表示数据,下图为商品的数据格式示例

    • 数据结构: 数据按照一定结构排列,形成的数据集合

      优惠信息数据结构展示:
      
      "promotionInfos": [
          {
            "preferentialId": 1210000000000001,
            "thresholdUnit": "string",
            "preferentialType": "COUPON",
            "preferentialQuota": 10,
            "preferentialThreshold": 200
          }
        ]
      

      返回数据报错或数据有误则是后端问题

    • 字段描述: 数据字段对应的中文描述,后端维护有一份数据字典

       "promotionInfos": 优惠券/满减信息
       [
          {
            "preferentialId": 优惠方案Id,
            "thresholdUnit": 门槛单位,
            "preferentialType": 优惠类型,
            "preferentialQuota": 优惠额度,
            "preferentialThreshold": 优惠门槛
          }
        ]
      
  1. 接口评审阶段: 由前后端双方确认,字段是否一致,数据格式是否符合要求
  2. 开发阶段: 目前开发模式为前后端分离,即前端后端并行开发,不受阻塞。前端可以直接根据后端定义接口的数据结构,进行模拟数据的搭建,完成功能编写
  3. 联调阶段: 双方独立工作完成,进行真实接口联调。将整个流程跑通
  4. 自测阶段: 开发人员根据测试用例进行自测,将过程中发现的问题及时修改,保证提测质量
  5. 产品及UI体验阶段: 完成需求交给对应人员,将提出的合理问题进行修复
  6. 提测阶段: 将需求提给测试人员,让其对该需求进行测试。测试根据排期进行几轮测试,直至产品能够交付
  7. 发布阶段: 保证1-9步骤没有问题,进行代码发布。由测试人员在线上进行相应的测试,如有Bug重复9,直至需求成功上线

浏览器中查看请求流

查看 请求方式、请求地址、请求字段、响应字段

  1. F12打开开发者工具

  2. 选择network,打开请求展示界面

  3. 选择XHR,筛选请求资源

  4. 点击请求列表中对应的请求,查看该请求详情

  5. Headers,请求和响应头,可查看请求基本信息

    • General中主要包括:请求方式,请求地址,状态码基本信息

    • Request Headers 请求头基本信息

    • Response Headers 响应头基本信息

    • Query String Parameters url后的请求参数

    • Form Data Form 表单形式传递的,body中的请求参数

    • Request payload JSON形式传递的,body中的请求参数

    查看请求参数是否和swagger中定义的参数一致,前端是否将参数传递错误【前端问题】

  6. Preview和Response 返回的数据,Preview为格式化后的返回数据,Response返回数据的字符串

    将返回的数据和swaggerUI中定义的返回数据进行比较,查看后端是否将数据返回错误? code是否返回OK? 【后端问题】

    常见的请求错误截图

http基础知识

  1. 请求方式

  2. http状态码

    • 2开头 成功处理了请求,常见:200[成功请求]
    • 3开头 请求被重定向,常见:304[从浏览器缓存中获取数据]
    • 4开头 请求错误,常见:401[未授权];403[服务器拒绝请求,token过期等]
    • 5开头 服务器本身出错,常见:500[服务器内部出错]将出错信息截图给服务器同事,协助处理问题
  3. 返回数据格式

    {
        code: "OK",
        data: {
        	"promotionInfos": [
              {
                "preferentialId": 1210000000000001,
                "thresholdUnit": "string",
                "preferentialType": "COUPON",
                "preferentialQuota": 10,
                "preferentialThreshold": 200
              }
            ]
        },
        msg: "资源获取成功"
    }
    

    code为服务器同事定义,B2B定义为“OK”即返回成功

    data的可能为空,对象,数组等格式

    msg 服务器返回的消息,有时候需要作为异常消息抛出