编写类 postman 页面 (4)

回顾

在上一节我们终于搞定了Params这个难啃的骨头，接下来我们要编写 headers，与之类似的组件，一起来试试吧~

思考

思考一下，headers和params都是键值对的形式，似乎不需要太大的改动，咱们有现成的可编辑表格，所以做起来会很方便。

其实照理说这种模块比如 params 还有 headers 都可以抽出为单独的组件，不过这里我觉得似乎复用的地方比较少，所以这个看人，其实也是可以抽出来的，毕竟一个组件如果太大了肯定会出现很多耦合问题。

观察 postman 的 headers 构造

可以看到 postman 的功能非常多，headers 可以隐藏，也给了默认的 headers，这边我们就简单点，说话的方式简单点。只保留核心表格就行了！

新增变量存放 headers 信息以及正在编辑的 key 信息

字段方面我们可以复用一部分

但是需要稍稍改动，因为在删除的时候，params除了要更新表格以外，还需要修改 url。

思路是把 columns 变成一个纯函数，参数为 params 的时候返回 params 的内容，为 headers 时返回 headers 的内容，其他的没有变化。

改动 onDelete 方法

上一步改动就是为了 onDelete 能够对不同的类型做出不同的删除操作，如果不是 params 则不修改 url 了。

最后是再引入一个可编辑表格

title 是 headers，没有 extra，数据是 headers 和 setHeaders 等。

调整一下 EditableTable 组件

这里加了一个判断，因为不传入这个字段会导致页面崩溃

看看效果

可以看到数据互不影响

编写 Body(重头戏来了)

首先需要了解一下，咱们的 body 里面其实是代码编辑器，我们可以采用开源的monaco react 版本，需要了解详情的话可以去它的官网看。

注意: 我们暂时只支持 JSON 类型的请求体，后面会增加 form 和 file 等等，因为我已经实在要看到成果了。。。

安装@monaco-editor/react

npm install @monaco-editor/react --save

编写编辑器组件src/components/Postman/CodeEditor.jsx

这里很简单哈，基本上是把官网的例子拿来抄了一下

对于那种可传可不传的变量，就给一个默认值，比如height和theme，因为它支持黑色主题哦。

引入组件

判断 bodyType 是不是 raw，如果是 raw 才显示此组件，否则显示 null。三元表达式大家应该都清楚。

然后包装了一层卡片，因为原先的不带有边框，所以我这里用 Card 组件包装了一层，然后给边距设置为 0。

看看效果

可以看到还有具体的错误提示

总体还是不错的吧？至此，我们一期的功能基本上就快要搞好了，还差一个相应信息栏。后面的业主别急，慢慢来。

来个动图感受下吧

联调接口

编写请求方法

和以前一样，直接接受参数并请求即可

import request from '@/utils/request';
import { CONFIG } from '@/consts/config';

export async function request(params) {
  return request(`${CONFIG.URL}/request/http`, {
    method: 'POST',
    data: params,
  });
}

编写组装 headers 的方法

因为 headers 是一个 map，所以咱们需要把它从数组变为 map。

创建一些状态

loading用来在请求的时候显示一个 loading 的状态

method将请求方式的 select 组件改成了受控组件，因为我们需要拿到它的值。

response后续我们会需要显示出具体的结果。

编写组装请求数据的方法onRequest

这个方法是点击到Send按钮后执行的方法，可以看到首先让 Send 按钮处于加载中，防止重复点击。然后判断参数是否合理，不合理直接弹出提示 (待会会有动图演示)

最后就是改回原来的状态并设置返回结果了。

后端调整

由于在我试用的过程中发现，后端遇到了几个的问题。

如果 response 是文本或者非 JSON，那么程序会直接报错
如果 headers 没有传入，那么程序也会报错

解决办法如图，如果能转为 JSON，就直接转为 JSON，否则返回 text。
如果没有 headers 则直接返回{}而不去遍历 headers 了。

ps: response_header 也需要判断，见完整代码。

完整代码:

import datetime

import requests


class Request(object):

    def __init__(self, url, session=False, **kwargs):
        self.url = url
        self.session = session
        self.kwargs = kwargs
        if self.session:
            self.client = requests.session()
            return
        self.client = requests

    def get(self):
        return self.request("GET")

    @staticmethod
    def get_elapsed(timer: datetime.timedelta):
        if timer.seconds > 0:
            return f"{timer.seconds}.{timer.microseconds // 1000}s"
        return f"{timer.microseconds // 100}ms"

    def request(self, method: str):
        status_code = 0
        elapsed = "-1ms"
        try:
            if method.upper() == "GET":
                response = self.client.get(self.url, **self.kwargs)
            elif method.upper() == 'POST':
                response = self.client.post(self.url, **self.kwargs)
            else:
                response = self.client.request(method, self.url, **self.kwargs)
            status_code = response.status_code
            if status_code != 200:
                return Request.response(False, status_code)
            elapsed = Request.get_elapsed(response.elapsed)
            data = self.get_response(response)
            return Request.response(True, 200, data, response.headers, response.request.headers, elapsed=elapsed)
        except Exception as e:
            return Request.response(False, status_code, msg=str(e), elapsed=elapsed)

    def post(self):
        return self.request("POST")

    def get_response(self, response):
        try:
            return response.json()
        except:
            return response.text

    @staticmethod
    def response(status, status_code=200, response=None, response_header=None,
                 request_header=None, elapsed=None, msg="success"):
        request_header = {k: v for k, v in request_header.items()} if request_header is not None else {}
        response_header = {k: v for k, v in response_header.items()} if response_header is not None else {}
        return {
            "status": status, "response": response, "status_code": status_code,
            "response_header": response_header, "request_header": request_header,
            "msg": msg, "elapsed": elapsed,
        }