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

32次阅读

共计 1115 个字符，预计需要花费 3 分钟才能阅读完成。

通常咱们 mock 数据都会装置 mockjs：yarn add mockjs
然而须要配置很多货色，还要拦挡申请等等，对老手不敌对，即便是新手也感觉麻烦。

举荐大家应用 useMock 在线 Mock 助手，我的项目 API 数据模仿，宣称比外部环境更贴心

反对团队合作
灵便解耦
不局域
可重复调试
主动生成文档

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>

正文完