import React, {Component} from 'react'
|
import { fromJS } from 'immutable'
|
import md5 from 'md5'
|
import { Input, Select, Button, Tabs, Radio, Modal, Spin } from 'antd'
|
|
import Api from '@/views/interface/api'
|
import Utils from '@/utils/utils.js'
|
import EditTable from '../editTable'
|
import CodeMirror from '@/templates/zshare/codemirror'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const InputGroup = Input.Group
|
const { Option } = Select
|
|
class Request extends Component {
|
state = {
|
active: 'raw',
|
body: null,
|
response: null,
|
status: '',
|
loading: false
|
}
|
|
UNSAFE_componentWillMount() {
|
const { config } = this.props
|
|
this.setState({active: config.active, config: fromJS(config).toJS()})
|
}
|
|
componentDidMount() {
|
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
onChange = (e) => {
|
const { config } = this.state
|
|
this.setState({active: e.target.value, config: {...config, active: e.target.value}})
|
}
|
|
rawChange = (val) => {
|
const { config } = this.state
|
|
this.setState({config: {...config, raw: val}})
|
}
|
|
changeFormData = (vals) => {
|
const { config } = this.state
|
|
this.setState({config: {...config, formData: vals}})
|
}
|
|
changeHeader = (vals) => {
|
const { config } = this.state
|
|
this.setState({config: {...config, headers: vals}})
|
}
|
|
changeParams = (vals) => {
|
const { config } = this.state
|
|
this.setState({config: {...config, params: vals}})
|
}
|
|
changeMethod = (val) => {
|
const { config } = this.state
|
|
this.setState({config: {...config, method: val}})
|
}
|
|
changeInter = (e) => {
|
const { config } = this.state
|
|
this.setState({config: {...config, interface: e.target.value}})
|
}
|
|
send = () => {
|
const { config } = this.state
|
|
let raws = null
|
if (!config.interface) {
|
Modal.error({
|
title: '请填入接口地址！'
|
})
|
return
|
} else if (config.active === 'raw') {
|
if (config.raw) {
|
try {
|
raws = JSON.parse(config.raw)
|
} catch {
|
Modal.error({
|
title: '参数格式错误，必须为JSON格式！'
|
})
|
return
|
}
|
}
|
}
|
|
let url = config.interface
|
|
let m = []
|
config.params.forEach(item => {
|
if (!item.selected || !item.key) return
|
m.push(`${item.key}=${item.value}`)
|
})
|
|
m = m.join('&')
|
|
if (m) {
|
if (/\?/ig.test(url)) {
|
url = url + '&' + m
|
} else {
|
url = url + '?' + m
|
}
|
}
|
|
let header = null
|
config.headers.forEach(item => {
|
if (!item.selected || !item.key) return
|
|
header = header || {}
|
|
header[item.key] = item.value
|
})
|
|
let n = null
|
if (config.active === 'raw' && raws) {
|
n = JSON.stringify(raws)
|
} else if (config.active === 'formData') {
|
config.formData.forEach(item => {
|
if (!item.selected || !item.key) return
|
|
n = n || {}
|
|
n[item.key] = item.value
|
})
|
n = JSON.stringify(n)
|
}
|
|
this.setState({loading: true})
|
|
if (/logon/ig.test(url)) {
|
Api.dologon(url, config.method, header, n).then(res => {
|
this.handleResponse(res)
|
}, (err) => {
|
this.handleResponse(err)
|
})
|
} else if (/dostars/ig.test(url)) {
|
if (n) {
|
n = JSON.parse(n)
|
n = this.encryptParam(n)
|
n = JSON.stringify(n)
|
}
|
Api.normalRequest(url, config.method, header, n).then(res => {
|
this.handleResponse(res)
|
}, (err) => {
|
this.handleResponse(err)
|
})
|
} else {
|
Api.normalRequest(url, config.method, header, n).then(res => {
|
this.handleResponse(res)
|
}, (err) => {
|
this.handleResponse(err)
|
})
|
}
|
}
|
|
handleResponse = (res) => {
|
let body = null
|
|
if (res && res.data) {
|
try {
|
body = JSON.stringify(res.data, null, 2)
|
|
body = body.replace(/\n/ig, '<br/>')
|
body = body.replace(/\s/ig, ' ')
|
} catch {
|
body = null
|
}
|
}
|
|
let status = ''
|
if (res.status) {
|
status = res.status + res.statusText
|
} else if (res.name === 'Error') {
|
status = res.message
|
body = `请求异常${status === 'Network Error' ? '，可能原因：1、网络异常；2、接口跨域。' : '！'}`
|
}
|
|
this.setState({response: res, body, status, loading: false})
|
}
|
|
encryptParam (param) {
|
param.nonc = Utils.getuuid()
|
|
let keys = Object.keys(param).sort()
|
let values = ''
|
keys.forEach(key => {
|
if (key.toLowerCase() === 'rduri') return
|
if (key.toLowerCase() === 't' || key.toLowerCase() === 'sign' || param[key] === undefined) {
|
delete param[key]
|
return
|
}
|
|
if (typeof(param[key]) === 'object') {
|
values += key + JSON.stringify(param[key])
|
} else {
|
if (param[key] && /: =$/.test(param[key])) {
|
param[key] = param[key].replace(/: =$/, '==')
|
}
|
values += key + param[key]
|
}
|
})
|
param.sign = md5(values)
|
param.t = new Date().getTime()
|
|
return param
|
}
|
|
save = () => {
|
const { config } = this.state
|
|
if (!config.interface) {
|
Modal.error({
|
title: '请填入接口地址！'
|
})
|
return
|
}
|
|
MKEmitter.emit('insertInterface', config)
|
}
|
|
render () {
|
const { active, config, response, body, status, loading } = this.state
|
|
let hasParam = config.params.filter(item => item.selected && item.key).length > 0
|
let hasHeader = config.headers.filter(item => item.selected && item.key).length
|
let hasBody = false
|
|
if (active === 'raw' && config.raw) {
|
hasBody = true
|
} else if (active === 'formData' && config.formData.filter(item => item.selected && item.key).length > 0) {
|
hasBody = true
|
}
|
|
return (
|
<div className="request-wrap">
|
<div className="request-interface">
|
<InputGroup compact>
|
<Select defaultValue={config.method} onChange={this.changeMethod}>
|
<Option value="POST">POST</Option>
|
<Option value="GET">GET</Option>
|
</Select>
|
<Input placeholder="Enter request URL" defaultValue={config.interface} onChange={this.changeInter}/>
|
</InputGroup>
|
<Button type="primary" onClick={this.send}>Send</Button>
|
<Button onClick={this.save}>Save</Button>
|
</div>
|
<Tabs animated={false} defaultActiveKey={hasBody ? 'Body' : 'Params'}>
|
<Tabs.TabPane forceRender={true} tab={<span className={hasParam ? 'active' : ''}>Params</span>} key="Params">
|
<EditTable data={config.params} onChange={this.changeParams}/>
|
</Tabs.TabPane>
|
<Tabs.TabPane forceRender={true} tab={<span>Headers{hasHeader ? <span className="number">{`(${hasHeader})`}</span> : ''}</span>} key="Headers">
|
<EditTable data={config.headers} onChange={this.changeHeader}/>
|
</Tabs.TabPane>
|
<Tabs.TabPane forceRender={true} tab={<span className={hasBody ? 'active' : ''}>Body</span>} key="Body">
|
<div className="body-class">
|
<Radio.Group onChange={this.onChange} value={active}>
|
<Radio value={'none'}>none</Radio>
|
<Radio value={'formData'}>formData</Radio>
|
<Radio value={'raw'}>raw</Radio>
|
</Radio.Group>
|
</div>
|
<div className={'body-content ' + (active === 'none' ? 'show' : '')}>
|
<div className="no-body">This request does not have a body</div>
|
</div>
|
<div className={'body-content ' + (active === 'formData' ? 'show' : '')}>
|
<EditTable data={config.formData} onChange={this.changeFormData}/>
|
</div>
|
<div className={'body-content ' + (active === 'raw' ? 'show' : '')}>
|
<CodeMirror value={config.raw} mode="text/javascript" onChange={this.rawChange} />
|
</div>
|
</Tabs.TabPane>
|
</Tabs>
|
<div className="response">
|
{response ? <div className="header">
|
{body ? 'Body' : 'Response'}
|
{status ? <span className="status">Status: <span className={status === '200OK' ? 'green' : 'yellow'}>{status}</span></span> : null}
|
</div> : <div className="header">
|
Response
|
<span className="empty">Hit the Send button to get a response.</span>
|
</div>}
|
<div style={{paddingLeft: '3px', paddingTop: '3px'}} dangerouslySetInnerHTML={{__html: body}}></div>
|
{loading ? <div className="pending"><Spin size="large"/></div> : null}
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default Request
|
