requestPage

src/router.js

@@ -40,6 +40,14 @@ const Routers = function ({ history, app }) {
               cb(null, require('./routes/users/'))
             }, 'users')
           },
+        }, {
+          path: 'request',
+          name: 'request',
+          getComponent (nextState, cb) {
+            require.ensure([], require => {
+              cb(null, require('./routes/request/'))
+            }, 'request')
+          },
         }, {
           path: 'UIElement/iconfont',
           name: 'UIElement/iconfont',

src/routes/request/index.js

@@ -0,0 +1,113 @@
+import React from 'react'
+import styles from './index.less'
+import { request, config } from '../../utils'
+import {
+  Row,
+  Col,
+  Card,
+  Select,
+  Input,
+  Button,
+} from 'antd'
+
+const requestOptions = [
+  {
+    url: `${location.origin}/api/users`,
+    desc: 'intercept request by mock.js',
+  },
+  {
+    url: `${config.baseURL}/admin/order`,
+    desc: 'cross-domain request, but match config.baseURL(./src/utils/config.js)',
+  },
+  {
+    url: 'http://www.zuimeitianqi.com/zuimei/queryWeather',
+    data: {
+      cityCode: '01010101',
+    },
+    desc: 'cross-domain request by yahoo\'s yql',
+  }]
+
+export default class RequestPage extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      currntRequest: requestOptions[0],
+      method: 'get',
+      result: '',
+    }
+  }
+  componentDidMount () {
+    this.handleRequest()
+  }
+
+  handleRequest = () => {
+    const { currntRequest } = this.state
+    const { desc, ...requestParams } = currntRequest
+    this.setState({
+      ...this.state,
+      result: <div key="sending">
+        请求中<br />
+        url:{currntRequest.url}<br />
+        method:{currntRequest.method}<br />
+        params:{currntRequest.data ? JSON.stringify(currntRequest.data) : 'null'}<br />
+      </div>,
+    })
+    request({ ...requestParams }).then((data) => {
+      const state = this.state
+      state.result = [this.state.result, <div key="complete"><div>请求完成</div>{JSON.stringify(data)}</div>]
+      this.setState(state)
+    })
+  }
+
+  handeleURLChange = (value) => {
+    const state = this.state
+    const currntItem = requestOptions.filter(item => value === item.url)
+    state.currntRequest = currntItem[0]
+    this.setState(state)
+  }
+
+  render () {
+    const colProps = {
+      lg: 12,
+      md: 24,
+    }
+    const { result, currntRequest } = this.state
+    const { methoad = 'get' } = currntRequest
+
+    return (
+      <div className="content-inner">
+        <Row gutter={32}>
+          <Col {...colProps}>
+            <Card title="Request" style={{
+              overflow: 'visible',
+            }}>
+              <div className={styles.option}>
+                <Input disabled value={methoad.toLocaleUpperCase()} size="large" style={{ width: 100 }} placeholder="GET" />
+                <Select style={{
+                  width: '100%',
+                  flex: 1,
+                }} defaultValue={requestOptions[0].url}
+                  size="large"
+                  onChange={this.handeleURLChange}
+                >
+                  {requestOptions.map(item => <Select.Option key={item.url} value={item.url}>
+                    {item.url}
+                  </Select.Option>)}
+                </Select>
+                <Button type="primary" style={{ width: 100, marginLeft: 16 }} onClick={this.handleRequest}>发送</Button>
+              </div>
+              <div className={styles.params}>
+                <div className={styles.label}>Params：</div>
+                <Input disabled value={currntRequest.data ? JSON.stringify(currntRequest.data) : 'null'} size="large" style={{ width: 200 }} placeholder="null" />
+                <div style={{ flex: 1, marginLeft: 16 }}>{currntRequest.desc}</div>
+              </div>
+              <div className={styles.result}>
+                {result}
+              </div>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}

src/routes/request/index.less

@@ -0,0 +1,29 @@
+.option {
+  display: flex;
+  justify-content: space-between;
+}
+
+.result {
+  height: 600px;
+  width: 100%;
+  background: #f7f7f7;
+  border-color: #F1F1F1;
+  padding: 16px 8px;
+  margin-top: 16px;
+  word-break: break-word;
+  line-height: 24px;
+  overflow: scroll;
+}
+
+.params {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+  line-height: 32px;
+
+  .label {
+    width: 100px;
+    margin-right: 2px;
+    text-transform: uppercase;
+  }
+}

src/utils/menu.js

@@ -9,9 +9,14 @@ module.exports = [
     name: '用户管理',
     icon: 'user',
   },
+  {
+    key: 'request',
+    name: 'Request',
+    icon: 'api',
+  },
   {
     key: 'UIElement',
-    name: 'UI组件',
+    name: 'UI Element',
     icon: 'camera-o',
     clickable: false,
     child: [

src/utils/request.js

@@ -3,7 +3,11 @@ import qs from 'qs'
 import config from './config'
 
 const fetch = (options) => {
-  const { method = 'get', data, url } = options
+  const {
+    method = 'get',
+    data,
+    url,
+  } = options
   switch (method.toLowerCase()) {
     case 'get':
       return axios.get(url, { params: data })
@@ -33,5 +37,7 @@ export default function request (options) {
 
   return fetch(options).then((result) => {
     return result.data
+  }).catch((error) => {
+    console.log(error)
   })
 }