yapi/client/containers/AddInterface/InterfaceTest/InterfaceTest.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Button, Input, Select, Card, Alert, Spin, Icon } from 'antd'
import { autobind } from 'core-decorators';
import crossRequest from 'cross-request';
import { withRouter } from 'react-router';
import axios from 'axios';
import URL from 'url';

import {
} from '../../../actions/group.js'

import './InterfaceTest.scss'

const { TextArea } = Input;
const InputGroup = Input.Group;
const Option = Select.Option;

@connect(
  state => ({
    reqParams: state.addInterface.reqParams,
    method: state.addInterface.method,
    url: state.addInterface.url,
    seqGroup: state.addInterface.seqGroup,
    interfaceName: state.addInterface.interfaceName,
    interfaceProject: state.addInterface.project
  }),
  {
  }
)
@withRouter
export default class InterfaceTest extends Component {

  static propTypes = {
    reqParams: PropTypes.string,
    method: PropTypes.string,
    url: PropTypes.string,
    interfaceName: PropTypes.string,
    seqGroup: PropTypes.array,
    match: PropTypes.object,
    interfaceProject: PropTypes.object
  }

  state = {
    res: '',
    method: 'GET',
    domains: [],
    pathname: '',
    query: {},
    params: {},
    paramsNotJson: false,
    headers: {},
    currDomain: ''
  }

  constructor(props) {
    super(props)
  }

  componentWillMount() {
    this.getInterfaceState()
  }

  componentWillReceiveProps(nextProps) {
    this.getInterfaceState(nextProps)
  }

  @autobind
  getInterfaceState(nextProps) {
    const props = nextProps || this.props;
    const { method, url, seqGroup, interfaceProject } = props;
    const { prd_host, basepath, protocol, env } = interfaceProject;
    const pathname = (basepath + url).replace(/\/+/g, '/');

    const domains = {prd: protocol + '://' + prd_host};
    env.forEach(item => {
      domains[item.name] = item.domain;
    })

    const query = [];
    let params = {};
    let reqParams = this.props.reqParams ? this.props.reqParams : '{}';
    let paramsNotJson = false;
    try {
      reqParams = JSON.parse(reqParams)
      paramsNotJson = false;
    } catch (e) {
      paramsNotJson = true;
    }
    if (method === 'GET') {
      Object.keys(reqParams).forEach(key => {
        const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
        query.push({key, value})
      })
    } else if (method === 'POST') {
      params = reqParams;
    }

    const headers = {}
    seqGroup.forEach((headerItem) => {
      if (headerItem.name) {
        headers[headerItem.name] = headerItem.value;
      }
    })

    this.setState({
      method,
      domains,
      pathname,
      query,
      params,
      paramsNotJson,
      headers,
      currDomain: domains.prd,
      loading: false
    });
  }

  @autobind
  requestInterface() {
    const { headers, params, currDomain, method, pathname, query } = this.state;
    const urlObj = URL.parse(currDomain);

    const href = URL.format({
      protocol: urlObj.protocol || 'http',
      host: urlObj.host,
      pathname,
      query: this.getQueryObj(query)
    });

    this.setState({ loading: true })

    crossRequest({
      url: href,
      method,
      headers,
      data: params,
      success: (res, header) => {
        console.log(header)
        try {
          res = JSON.parse(res);
        } catch (e) {
          null;
        }
        this.setState({res})
        this.setState({ loading: false })
      },
      error: (err, header) => {
        console.log(header)
        this.setState({res: err || '请求失败'})
        this.setState({ loading: false })
      }
    })
  }

  @autobind
  changeDomain(value) {
    this.setState({ currDomain: value });
  }

  @autobind
  selectDomain(value) {
    this.setState({ currDomain: value });
  }

  @autobind
  changeHeader(e, key) {
    const headers = JSON.parse(JSON.stringify(this.state.headers));
    headers[key] = e.target.value;
    this.setState({ headers });
  }

  @autobind
  changeQuery(e, index, isKey) {
    const query = JSON.parse(JSON.stringify(this.state.query));
    const v = e.target.value;
    if (isKey) {
      query[index].key = v;
    } else {
      query[index].value = v;
    }
    this.setState({ query });
  }
  @autobind
  addQuery() {
    const { query } = this.state;
    this.setState({query: query.concat([{key: '', value: ''}])})
  }
  @autobind
  deleteQuery(index) {
    const { query } = this.state;
    this.setState({query: query.filter((item, i) => +index !== +i)});
  }

  @autobind
  changeParams(e, key) {
    const params = JSON.parse(JSON.stringify(this.state.params));
    params[key] = e.target.value;
    this.setState({ params });
  }

  @autobind
  changeMethod(value) {
    this.setState({ method: value });
  }

  @autobind
  changePath(e) {
    const path = e.target.value;
    const urlObj = URL.parse(path, true);
    this.setState({
      query: urlObj.query,
      pathname: urlObj.pathname
    })
  }

  hasCrossRequestPlugin() {
    const dom = document.getElementById('y-request');
    return dom.getAttribute('key') === 'yapi';
  }

  getQueryObj(query) {
    const queryObj = {};
    query.forEach(item => {
      if (item.key) {
        queryObj[item.key] = item.value || '';
      }
    })
    return queryObj;
  }

  render () {

    const { interfaceName } = this.props;
    const { method, domains, pathname, query, headers, params, paramsNotJson, currDomain } = this.state;
    const hasPlugin = this.hasCrossRequestPlugin();
    const search = decodeURIComponent(URL.format({query: this.getQueryObj(query)}));

    console.log(axios)
    window.axios = axios


    return (
      <div className="interface-test">
        <div style={{padding: '0 20%'}}>
          { hasPlugin ? '' :
          <Alert
            message={
              <div>
                温馨提示：当前正在使用接口测试服务，请安装我们为您免费提供的&nbsp;
                <a
                  target="blank"
                  href="https://chrome.google.com/webstore/detail/cross-request/cmnlfmgbjmaciiopcgodlhpiklaghbok?hl=en-US"
                >
                  测试增强插件 [点击获取]！
                </a>
              </div>
            }
            type="warning"
          />
          }
        </div>
        <div className="interface-name">{interfaceName}</div>

        {/* url */}
        <div className="req-part">
          <div className="req-row href">
            <InputGroup compact style={{display: 'inline-block', width: 680, border: 0, background: '#fff', marginBottom: -4}}>
              <Input value="Method" disabled style={{display: 'inline-block', width: 80, border: 0, background: '#fff'}} />
              <Input value="Domain" disabled style={{display: 'inline-block', width: 300, border: 0, background: '#fff'}} />
              <Input value="Basepath + Url + [Query]" disabled style={{display: 'inline-block', width: 300, border: 0, background: '#fff'}} />
            </InputGroup>
            <InputGroup compact style={{display: 'inline-block', width: 680}}>
              <Select value={method} style={{display: 'inline-block', width: 80}} onChange={this.changeMethod} >
                <Option value="GET">GET</Option>
                <Option value="POST">POST</Option>
              </Select>
              <Select value={currDomain} mode="combobox" filterOption={() => true} style={{display: 'inline-block', width: 300}} onChange={this.changeDomain} onSelect={this.selectDomain}>
                {
                  Object.keys(domains).map((key, index) => (<Option value={domains[key]} key={index}>{key + '：' + domains[key]}</Option>))
                }
              </Select>
              <Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{display: 'inline-block', width: 300}} />
            </InputGroup>
            <Button
              onClick={this.requestInterface}
              type="primary"
              style={{marginLeft: 10}}
              loading={this.state.loading}
            >发送</Button>
            <span style={{fontSize: 12, color: 'rgba(0, 0, 0, 0.25)'}}>（请求测试真实接口）</span>
          </div>

          <Card title="Query" noHovering style={{marginTop: 10}}>
            {
              query.map((item, index) => {
                return (
                  <div key={index}>
                    <Input value={item.key} onChange={e => this.changeQuery(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
                    <Input value={item.value} onChange={e => this.changeQuery(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
                    <Icon type="close" className="icon-btn" onClick={() => this.deleteQuery(index)} />
                  </div>
                )
              })
            }
            <Button type="primary" icon="plus" onClick={this.addQuery}>Add query parameter</Button>
          </Card>
          <Card title="HEADERS" noHovering style={{marginTop: 10}} className={Object.keys(headers).length ? '' : 'hidden'}>
            <div className="req-row headers">
              {
                Object.keys(headers).map((key, index) => {
                  return (
                    <div key={index}>
                      <Input value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
                      <Input value={headers[key]} onChange={e => this.changeHeader(e, key)} style={{display: 'inline-block', width: 200, margin: 10}} />
                    </div>
                  )
                })
              }
              <Button type="primary" icon="plus">Add header</Button>
            </div>
          </Card>
          <Card title="Body" noHovering style={{marginTop: 10}} className={method === 'POST' ? '' : 'hidden'}>
            <div className="req-row params">
              { paramsNotJson ?
                <TextArea
                  value={params}
                  style={{margin: 10}}
                  autosize={{ minRows: 2, maxRows: 6 }}
                ></TextArea> :
                Object.keys(params).map((key, index) => {
                  const value = typeof params[key] === 'object' ? JSON.stringify(params[key]) : params[key].toString();
                  return (
                    <div key={index}>
                      <Input value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
                      <Input value={value} onChange={e => this.changeParams(e, key)} style={{display: 'inline-block', width: 200, margin: 10}} />
                    </div>
                  )
                })
              }
              <Button type="primary" icon="plus">Add form parameter</Button>
            </div>
          </Card>
        </div>
        <Card title="返回结果" noHovering style={{marginTop: 10}}>
          <Spin spinning={this.state.loading}>
            <div className="res-part">
              <div style={{padding: 10}}>
                <TextArea
                  value={typeof this.state.res === 'object' ? JSON.stringify(this.state.res, null, 2) : this.state.res.toString()}
                  autosize={{ minRows: 2, maxRows: 6 }}
                ></TextArea>
              </div>
            </div>
          </Spin>
        </Card>
      </div>
    )
  }
}