mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-24 13:14:16 +08:00
feat: 请求接口
This commit is contained in:
zwjamnsss
parent
9916ecbd7e
commit
b5bed3c1f4
@ -43,7 +43,15 @@ export default class InterfaceTest extends Component {
|
||||
|
||||
state = {
|
||||
res: '',
|
||||
header: {}
|
||||
method: 'GET',
|
||||
domains: [],
|
||||
pathname: '',
|
||||
query: {},
|
||||
params: {},
|
||||
paramsNotJson: false,
|
||||
headers: {},
|
||||
search: '',
|
||||
currDomain: ''
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
@ -51,21 +59,42 @@ export default class InterfaceTest extends Component {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.interfacePropsToState()
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.interfacePropsToState(nextProps)
|
||||
}
|
||||
|
||||
@autobind
|
||||
testInterface() {
|
||||
const { method, url, seqGroup, interfaceProject } = this.props;
|
||||
const { prd_host, basepath, protocol } = interfaceProject;
|
||||
const reqParams = JSON.parse(this.props.reqParams);
|
||||
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) : reqParams.toString();
|
||||
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
|
||||
query[key] = value;
|
||||
})
|
||||
} else if (method === 'POST') {
|
||||
params = reqParams;
|
||||
}
|
||||
|
||||
const headers = {}
|
||||
@ -75,10 +104,27 @@ export default class InterfaceTest extends Component {
|
||||
}
|
||||
})
|
||||
|
||||
this.setState({
|
||||
domains,
|
||||
pathname,
|
||||
query,
|
||||
params,
|
||||
paramsNotJson,
|
||||
headers,
|
||||
currDomain: domains.prd
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
testInterface() {
|
||||
const { method } = this.props;
|
||||
const { pathname, query, headers, params, currDomain } = this.state;
|
||||
const urlObj = URL.parse(currDomain);
|
||||
|
||||
const href = URL.format({
|
||||
protocol: protocol || 'http',
|
||||
host: prd_host,
|
||||
pathname: (basepath + url).replace(/\/+/g, '/'),
|
||||
protocol: urlObj.protocol || 'http',
|
||||
host: urlObj.host,
|
||||
pathname,
|
||||
query
|
||||
});
|
||||
|
||||
@ -86,9 +132,7 @@ export default class InterfaceTest extends Component {
|
||||
url: href,
|
||||
method,
|
||||
headers,
|
||||
data: {
|
||||
a:1
|
||||
},
|
||||
data: params,
|
||||
success: (res, header) => {
|
||||
console.log(header)
|
||||
this.setState({res})
|
||||
@ -96,33 +140,38 @@ export default class InterfaceTest extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
@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 });
|
||||
}
|
||||
|
||||
|
||||
render () {
|
||||
const { method, url, seqGroup, interfaceName, interfaceProject } = this.props;
|
||||
const { prd_host, basepath, protocol, env } = interfaceProject;
|
||||
const reqParams = this.props.reqParams ? JSON.parse(this.props.reqParams) : [];
|
||||
const pathname = (basepath + url).replace(/\/+/g, '/');
|
||||
|
||||
const domains = [{name: 'prd', domain: protocol + '://' + prd_host}];
|
||||
env.forEach(item => {
|
||||
domains.push({name: item.name, domain: item.domain});
|
||||
})
|
||||
|
||||
const query = {};
|
||||
if (method === 'GET') {
|
||||
Object.keys(reqParams).forEach(key => {
|
||||
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
|
||||
query[key] = value;
|
||||
})
|
||||
}
|
||||
|
||||
const headers = {}
|
||||
seqGroup.forEach((headerItem) => {
|
||||
if (headerItem.name) {
|
||||
headers[headerItem.name] = headerItem.value;
|
||||
}
|
||||
})
|
||||
|
||||
const { interfaceName, method } = this.props;
|
||||
const { domains, pathname, query, headers, params, paramsNotJson } = this.state;
|
||||
const search = URL.format({
|
||||
query
|
||||
});
|
||||
@ -135,40 +184,58 @@ export default class InterfaceTest extends Component {
|
||||
<div className="req-row href">
|
||||
<InputGroup compact style={{display: 'inline-block', width: 680}}>
|
||||
<Input value={method} disabled style={{display: 'inline-block', width: 80}} />
|
||||
<Select defaultValue="prd" style={{display: 'inline-block', width: 300}}>
|
||||
<Select defaultValue="prd" style={{display: 'inline-block', width: 300}} onChange={this.changeDomain}>
|
||||
{
|
||||
domains.map((item, index) => (<Option value={item.name} key={index}>{item.domain}</Option>))
|
||||
Object.keys(domains).map((key, index) => (<Option value={key} key={index}>{domains[key]}</Option>))
|
||||
}
|
||||
</Select>
|
||||
<Input value={pathname+search} style={{display: 'inline-block', width: 300}} />
|
||||
<Input value={pathname+search} disabled style={{display: 'inline-block', width: 300}} />
|
||||
</InputGroup>
|
||||
<Button onClick={this.testInterface} type="primary" style={{marginLeft: 10}}>发送</Button>
|
||||
</div>
|
||||
<Card noHovering style={{marginTop: 10}} className={Object.keys(headers).length ? '' : 'hidden'}>
|
||||
<Card title="HEADERS" noHovering style={{marginTop: 10}} className={Object.keys(headers).length ? '' : 'hidden'}>
|
||||
<div className="req-row headers">
|
||||
HEADERS：
|
||||
{
|
||||
Object.keys(headers).map((key, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
|
||||
<Input value={headers[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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Card>
|
||||
<Card noHovering style={{marginTop: 10}} className={Object.keys(reqParams).length ? '' : 'hidden'}>
|
||||
<div className="req-row params">
|
||||
请求参数：
|
||||
<Card title="Query" noHovering style={{marginTop: 10}} className={Object.keys(query).length ? '' : 'hidden'}>
|
||||
<div className="req-row query">
|
||||
{
|
||||
Object.keys(reqParams).map((key, index) => {
|
||||
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
|
||||
Object.keys(query).map((key, index) => {
|
||||
const value = typeof query[key] === 'object' ? JSON.stringify(query[key]) : query[key].toString();
|
||||
return (
|
||||
<div key={index}>
|
||||
<Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
|
||||
<Input value={value} style={{display: 'inline-block', width: 200, margin: 10}} />
|
||||
<Input value={value} onChange={e => this.changeQuery(e, key)} style={{display: 'inline-block', width: 200, margin: 10}} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Body" noHovering style={{marginTop: 10}} className={Object.keys(params).length ? '' : '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 disabled 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>
|
||||
)
|
||||
})
|
||||
@ -176,9 +243,8 @@ export default class InterfaceTest extends Component {
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<Card noHovering style={{marginTop: 10}}>
|
||||
<Card title="返回结果" noHovering style={{marginTop: 10}}>
|
||||
<div className="res-part">
|
||||
返回结果：
|
||||
<div>
|
||||
<TextArea
|
||||
value={this.state.res ? JSON.stringify(this.state.res, 2) : ''}
|
||||
|
||||
@ -87,8 +87,6 @@ class InterfaceTable extends Component {
|
||||
<span>
|
||||
<Link to={`/AddInterface/edit/${data._id}`}><span>编辑</span></Link>
|
||||
<span className="ant-divider" />
|
||||
<Link to={`/AddInterface/edit/${data._id}`}><span>测试</span></Link>
|
||||
<span className="ant-divider" />
|
||||
<Popconfirm title="是否删除接口!" onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<a href="">删除</a>
|
||||
</Popconfirm>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user