react使用在线mock服务，模拟真实请求示例，不用安装mockjs库

通常我们mock数据都会安装mockjs：yarn add mockjs但是需要配置很多东西，还要拦截请求等等，对新手不友好，即使是老手也觉得麻烦。

推荐大家使用useMock 在线Mock助手，项目API数据模拟，声称比内部环境更贴心

1. 支持团队协作
2. 灵活解耦
3. 不局域
4. 可反复调试
5. 自动生成文档

官网：https://www.usemock.com/

React请求示例：在线Demo: https://www.usemock.com/demo/...

<div id="app"></div>

<script type="text/babel">


  const axiosDemo = React.createElement(() => {
    const { useState } = window.React;

    const [apiUrl, setApiUrl] = useState("https://2weima.usemock.com/api/qrdecode"); //input
    const [info, setInfo] = useState(null); // 请求结果

    const onReqApi = ()=> {
     
        // 使用axios发请求
        axios.post(apiUrl,{
          // 模拟请求信息
          qr_image:"https://img.2weima.com/qr_template/2021/6/26/8857784941a0f2d2a024044f414c69f9.jpg"
        })
        .then(response =>{
          // 响应信息
          setInfo(response.data)
          console.log('由于跨域请求，在Network中多一个 Request Method: OPTIONS 请求是正常的。')
          console.log('response data:',response.data)
        })
      }
 
    return <div>
      <div class="ui-input">接口URL:<input placeholder="useMock接口链接" value={apiUrl} onChange={(event)=>{ setApiUrl(event.target.value)}}  /></div>
        <p>
          <button class="ui-button" data-type="primary" onClick={()=>{ onReqApi() }}>发送请求</button>
        </p>
        {info && (
          <div>
          <h4>请求结果：</h4>
          <p>{JSON.stringify(info)}</p>
        </div>
        )}
        
      
      </div>

  });

  ReactDOM.render(
      <div>{axiosDemo}</div>,
      document.getElementById('app')
  );


</script>