likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 29

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

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

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

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

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

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


<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>
转载自:https://segmentfault.com/a/1190000041406326
评论
请登录