mockjs让前端开辟独立于后端

2024年5月10日 241次阅读 来源: Jakeyu

mock.js 能够模仿ajax数据，阻拦ajax要求，返回模仿数据，无需后端返回就能够测试前端顺序

mockjs官网

原文：http://i.jakeyu.top/2016/08/1…

首先在head头中引入我们须要的mockjs文件

<script src="http://mockjs.com/dist/mock.js"></script>

在ajax要求之前，用mack定义返回数据

Mock.mock('http://laoyu', {
 "errorcode": 0,//0示意胜利，1示意毛病
 "message": "xx信息不完整", //弹出毛病信息
});

在ajax中,open()的url要与mock中的雷同，比方我这里是http://laoyu,那末

XHR.open（"post/get","http://laoyu",true/false）

好了，说到这里，我们举行测试一下

<script>
//挪用mock要领模仿数据
Mock.mock('http://laoyu', {
  "errorcode": 0,//0示意胜利，1示意毛病
  "message": "xx信息不完整", //弹出毛病信息
});
//运用ajax举行测试
        var xhr = XMLHttpRequest();
        xhr.open("post","http://laoyu",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(null);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if((xhr.status>=200 && xhr.status<300) || xhr.status== 304){
                    var data = JSON.parse(xhr.responseText);  
                    //由于reponseText返回的是字符串，将字符串转换成我们想要的JSON数据，如许就能够挪用了
                    console.log(data)；  //在掌握台中打印出返回的内容
                }else{
                    alert("Request was unsuccessful: " + xhr.status);
                }
            }
        }
</script>

看到没，返回了我们运用mock模仿的数据，如许就能够无需背景，直接举行本身的测试了

xhr.readyState的五种状况

0 － （未初始化）还没有挪用open()要领 
1 － （服务器衔接已竖立）已挪用open()要领，正在发送要求 
2 － （要求已吸收）send()要领实行完成，已吸收到悉数相应内容 
3 － （要求处置惩罚中）正在剖析相应内容 
4 － （要求已完成）相应内容剖析完成，能够在客户端挪用了
    原文作者：Jakeyu
    原文地址: https://segmentfault.com/a/1190000007372323
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞