2017-07-25 13:34:48 +08:00
|
|
|
|
import React, { Component } from 'react'
|
2017-07-25 21:24:12 +08:00
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
|
import { connect } from 'react-redux'
|
|
|
|
|
import { Button, Input } from 'antd'
|
2017-07-25 13:34:48 +08:00
|
|
|
|
import { autobind } from 'core-decorators';
|
|
|
|
|
import crossRequest from 'cross-request';
|
2017-07-25 21:24:12 +08:00
|
|
|
|
import { withRouter } from 'react-router';
|
|
|
|
|
import URL from 'url';
|
2017-07-25 13:34:48 +08:00
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
} from '../../../actions/group.js'
|
|
|
|
|
|
|
|
|
|
import './InterfaceTest.scss'
|
|
|
|
|
|
2017-07-25 21:24:12 +08:00
|
|
|
|
@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
|
2017-07-25 13:34:48 +08:00
|
|
|
|
export default class InterfaceTest extends Component {
|
|
|
|
|
|
|
|
|
|
static propTypes = {
|
2017-07-25 21:24:12 +08:00
|
|
|
|
reqParams: PropTypes.string,
|
|
|
|
|
method: PropTypes.string,
|
|
|
|
|
url: PropTypes.string,
|
|
|
|
|
interfaceName: PropTypes.string,
|
|
|
|
|
seqGroup: PropTypes.array,
|
|
|
|
|
match: PropTypes.object,
|
|
|
|
|
interfaceProject: PropTypes.object
|
2017-07-25 13:34:48 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
state = {
|
2017-07-25 21:24:12 +08:00
|
|
|
|
res: {},
|
|
|
|
|
header: {}
|
2017-07-25 13:34:48 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-25 21:24:12 +08:00
|
|
|
|
componentWillMount() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-25 13:34:48 +08:00
|
|
|
|
@autobind
|
|
|
|
|
testInterface() {
|
|
|
|
|
crossRequest({
|
|
|
|
|
url: 'http://petstore.swagger.io/v2/swagger.json',
|
|
|
|
|
method: 'GET',
|
|
|
|
|
data: {
|
|
|
|
|
a:1
|
|
|
|
|
},
|
|
|
|
|
success: (res, header) => {
|
|
|
|
|
this.setState({res})
|
|
|
|
|
console.log(header)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render () {
|
2017-07-25 21:24:12 +08:00
|
|
|
|
const { method, url, seqGroup, interfaceName, interfaceProject } = this.props;
|
|
|
|
|
const { prd_host, basepath, protocol } = interfaceProject;
|
|
|
|
|
const reqParams = JSON.parse(this.props.reqParams);
|
|
|
|
|
let query = {};
|
|
|
|
|
|
|
|
|
|
if (method === 'GET') {
|
|
|
|
|
Object.keys(reqParams).forEach(key => {
|
|
|
|
|
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
|
|
|
|
|
query[key] = value;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const href = URL.format({
|
|
|
|
|
protocol: protocol || 'http',
|
|
|
|
|
host: prd_host,
|
|
|
|
|
pathname: URL.resolve(basepath, url),
|
|
|
|
|
query
|
|
|
|
|
});
|
|
|
|
|
|
2017-07-25 13:34:48 +08:00
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
2017-07-25 21:24:12 +08:00
|
|
|
|
<div>接口名:{interfaceName}</div>
|
|
|
|
|
<div>
|
|
|
|
|
METHOD: <Input value={method} disabled />
|
|
|
|
|
URL: <Input value={href} />
|
|
|
|
|
HEADERS: <Input value={JSON.stringify(seqGroup, 2)} />
|
|
|
|
|
请求参数:
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
Object.keys(reqParams).map((key, index) => {
|
|
|
|
|
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
|
|
|
|
|
return (
|
|
|
|
|
<div key={index}>
|
|
|
|
|
<Input value={key} style={{display: 'inline-block', width: 200}} />{' = '}
|
|
|
|
|
<Input value={value} style={{display: 'inline-block', width: 200}} />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2017-07-25 13:34:48 +08:00
|
|
|
|
<Button onClick={this.testInterface}>发送跨域请求</Button>
|
|
|
|
|
<div>
|
2017-07-25 21:24:12 +08:00
|
|
|
|
{JSON.stringify(this.state.res, 2)}
|
2017-07-25 13:34:48 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|