mockjs让前端开发独立于后端

内容简介：mockjs让前端开发独立于后端

mock.js 可以模拟ajax数据，拦截ajax请求，返回模拟数据，无需后端返回就可以测试前端程序

mockjs官网

首先要感谢凯伦 Kieran 大神的帮助

话不多说直接进入主题

引入文件

首先在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 = new 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 － （请求已完成）响应内容解析完成，可以在客户端调用了

以上所述就是小编给大家介绍的《mockjs让前端开发独立于后端》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 大前端时代下的微前端架构：实现增量升级、代码解耦、独立部署
• 前端项目无独立部署环境时，使用shell命令简化依赖后台部署的繁杂操作
• Laravel 6 LTS 正式发布：遵循语义化版本标准、前端脚手架独立为 Laravel UI
• 重回独立，SUSE 成全球最大独立开源公司
• 从流水线到独立办公桌
• Docker容器之内网独立IP访问

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。