通常咱们 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>