import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import { Button, Input, Select, Card, Alert, Spin } from 'antd' import { autobind } from 'core-decorators'; import crossRequest from 'cross-request'; import { withRouter } from 'react-router'; 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: {}, search: '', currDomain: '' } constructor(props) { super(props) } componentWillMount() { this.interfacePropsToState() } componentWillReceiveProps(nextProps) { this.interfacePropsToState(nextProps) } @autobind interfacePropsToState(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[key] = value; }) } else if (method === 'POST') { params = reqParams; } const headers = {} seqGroup.forEach((headerItem) => { if (headerItem.name) { headers[headerItem.name] = headerItem.value; } }) this.setState({ domains, pathname, query, params, paramsNotJson, headers, currDomain: domains.prd, loading: false }); } @autobind testInterface() { const { method } = this.props; const { pathname, query, headers, params, currDomain } = this.state; const urlObj = URL.parse(currDomain); const href = URL.format({ protocol: urlObj.protocol || 'http', host: urlObj.host, pathname, 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) { const domain = this.state.domains[value]; this.setState({ currDomain: domain }); } @autobind changeHeader(e, key) { const headers = JSON.parse(JSON.stringify(this.state.headers)); headers[key] = e.target.value; this.setState({ headers }); } @autobind changeQuery(e, key) { const query = JSON.parse(JSON.stringify(this.state.query)); query[key] = e.target.value; this.setState({ query }); } @autobind changeParams(e, key) { const params = JSON.parse(JSON.stringify(this.state.params)); params[key] = e.target.value; this.setState({ params }); } hasCrossRequestPlugin() { const dom = document.getElementById('y-request'); return dom.getAttribute('key') === 'yapi'; } render () { const { interfaceName, method } = this.props; const { domains, pathname, query, headers, params, paramsNotJson } = this.state; const search = URL.format({ query }); const hasPlugin = this.hasCrossRequestPlugin(); return (
{ hasPlugin ? '' : 温馨提示:当前正在使用接口测试服务,请安装我们为您免费提供的  测试增强插件 [点击获取]!
} type="warning" /> }
{interfaceName}
(请求测试真实接口)
{ Object.keys(headers).map((key, index) => { return (
{' = '} this.changeHeader(e, key)} style={{display: 'inline-block', width: 200, margin: 10}} />
) }) }
{ Object.keys(query).map((key, index) => { const value = typeof query[key] === 'object' ? JSON.stringify(query[key]) : query[key].toString(); return (
{' = '} this.changeQuery(e, key)} style={{display: 'inline-block', width: 200, margin: 10}} />
) }) }
{ paramsNotJson ? : Object.keys(params).map((key, index) => { const value = typeof params[key] === 'object' ? JSON.stringify(params[key]) : params[key].toString(); return (
{' = '} this.changeParams(e, key)} style={{display: 'inline-block', width: 200, margin: 10}} />
) }) }
) } }