request.jsx 4.09 KB
Newer Older
1
import React, { useState } from 'react';
张烨's avatar
张烨 committed
2
import { Form, Input, Button, Space, Select, Col } from 'antd';
3
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
张烨's avatar
张烨 committed
4
import { get, post } from '../../services';
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

const methods = [
  { label: 'get', value: 'get' },
  { label: 'post', value: 'post' },
];

const RequestTest = () => {
  const [protocal, setprotocal] = useState('http://');
  const [form] = Form.useForm();

  const onFinish = values => {
    const url = protocal + values.url;
    const methodMap = { get, post };
    const { method } = values;
    const params =
      values.params &&
      values.params.reduce((param, { key, value }) => {
张烨's avatar
张烨 committed
22
        // eslint-disable-next-line no-param-reassign
23 24 25 26 27
        param[key.trim()] = value.trim();
        return param;
      }, {});
    if (window.location.host === values.url) {
      methodMap[method](url, params).catch(err => {
张烨's avatar
张烨 committed
28 29 30
        // eslint-disable-next-line no-console
        console.error(err);
      });
31
    } else {
张烨's avatar
张烨 committed
32 33 34 35 36 37 38 39
      const proxyUrl = url.replace(
        // eslint-disable-next-line no-useless-escape
        /^https?:\/\/([^\/]+)/,
        () => `${window.location.origin}`,
      );
      methodMap[method](proxyUrl, params).catch(err => {
        // eslint-disable-next-line no-console
        console.error(err);
40
      });
41 42 43 44 45 46 47 48 49 50 51 52 53
    }
  };

  const handleProtoSelectChange = v => {
    setprotocal(v);
  };

  const protocalBefore = (
    <Select
      defaultValue="http://"
      className="select-before"
      onChange={handleProtoSelectChange}
    >
张烨's avatar
张烨 committed
54 55
      <Select.Option value="http://">http://</Select.Option>
      <Select.Option value="https://">https://</Select.Option>
56 57 58
    </Select>
  );

张烨's avatar
张烨 committed
59 60 61 62 63 64
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };

  const paramItemLayout = {
张烨's avatar
张烨 committed
65
    labelCol: { span: 8 },
张烨's avatar
张烨 committed
66 67 68
    wrapperCol: { span: 24 },
  };

69 70 71 72 73
  return (
    <Form
      form={form}
      name="dynamic_form_nest_item"
      onFinish={onFinish}
张烨's avatar
张烨 committed
74
      {...formItemLayout}
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
      autoComplete="off"
    >
      <Form.Item
        name="url"
        label="url"
        rules={[{ required: true, message: 'Missing url' }]}
        initialValue={window.location.host}
      >
        <Input addonBefore={protocalBefore} />
      </Form.Item>
      <Form.Item
        name="method"
        label="method"
        rules={[{ required: true, message: 'Missing method' }]}
        initialValue="get"
      >
        <Select options={methods} />
      </Form.Item>
      <Form.List name="params">
张烨's avatar
张烨 committed
94 95 96
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
张烨's avatar
张烨 committed
97 98
              <Col span={14} offset={5} key={field.key}>
                <Space align="start">
张烨's avatar
张烨 committed
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
                  <Form.Item
                    {...field}
                    label="key"
                    name={[field.name, 'key']}
                    fieldKey={[field.fieldKey, 'key']}
                    {...paramItemLayout}
                    rules={[{ required: true, message: 'Missing key' }]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    label="value"
                    {...paramItemLayout}
                    fieldKey={[field.fieldKey, 'value']}
                    name={[field.name, 'value']}
                  >
                    <Input />
                  </Form.Item>
                  <MinusCircleOutlined onClick={() => remove(field.name)} />
                </Space>
              </Col>
张烨's avatar
张烨 committed
121
            ))}
张烨's avatar
张烨 committed
122 123 124 125 126 127
            <Form.Item
              wrapperCol={{
                span: 14,
                offset: 5,
              }}
            >
张烨's avatar
张烨 committed
128 129 130 131 132 133 134 135 136 137 138 139
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add params
              </Button>
            </Form.Item>
          </>
        )}
140 141
      </Form.List>

张烨's avatar
张烨 committed
142 143
      <Form.Item wrapperCol={{ span: 5, offset: 10 }}>
        <Button type="primary" htmlType="submit" block>
144 145 146 147 148 149 150 151
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default RequestTest;