前端经常遇到的一个场景就是需要请求后台数据。
请求数据就是请求接口:
发起ajax请求--->www.baidu.com(随便写的,代表一个能返回数据的网址)--->response一些数据----->前端js处理之后---->铺到页面中去。
那么这套流程中,需要与他人合作的一个地方就是接口啦~一般后端小哥会给你一个接口文档,里面是那个接口需要携带的参数,以及他会返回给你的对象,里面有很多字段,你只有定义同样的字段才可以拿到对应的数据~
但是~如果你是一个自己做项目的孤独者,没有后端小哥给你接口呢?又或者是小哥给你的接口他还在开发中?或者后端分支不在他的分支上,接口目前用不了?遇到以上3种情况,你怎么不被影响前端的开发进度呢?
当当当~~你需要easy mock!没有接口怎么办,就自己造接口!
来来来,撸起袖子5分钟,你就是后端小哥本人!?
1.打开网址:https://www.easy-mock.com/login,点击开始,输入账号密码
2. 进入首页之后点击右下角的+,创建一个项目
3.填写项目信息
项目名由你自己决定、基础url看你自己的需求、项目描述就是备注、然后创建,首页就会多一个你刚刚创建的项目啦:
4.点开这个项目,开始编写你需要的接口(这里可以按着后端给的接口文档来,如果是个人项目的话就自己编)
点开之后的页面如下图:
这里的base URL就是基础请求路径了,放入你的项目中,之后的每个接口都是基于这一长串的哦~
5.有了基础路由,就可以创建第一个接口了~
举个栗子?!
先点击创建接口~进入这个页面:
左侧区域用来编写返回的对象+右侧区域用来设置请求的具体接口和请求方式,举个栗子:
左侧区域返回一个列表,包含姓名+电话:
一个请求方式为get,路径为/list的接口,
完整路径是 https://www.easy-mock.com/mock/5c4fc6e29ccfcd0ae7ea0949/home/list,
然后点击创建,这个接口就实现了,回到主页之后,可以对这个接口进行对应的操作:查看+编辑+复制接口地址~
6.OK,接口大功告成,那有的朋友可能还是不知道怎么用,怎么在项目里请求呢?paopaosama就再举个小?~
var baseUrl ="https://www.easy-mock.com/mock/5c4fc6e29ccfcd0ae7ea0949/home" ;//这里是项目正中间的那个长长的Base URL!
var params = {
url: baseUrl +'/list',//基础url拼接接口url
data: {
id:1//这里是要携带的参数
},
success: function (res) {//success为请求成功之后,会返回接口内容,打印res就能拿到
console.log(res);
},
error: function (error) {
console.log(error);
}
};
//以下是ajax请求过程,这个不赘述了
var xhr = new XMLHttpRequest();
// 定义xhr对象的请求响应事件
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 0 :
//alert("请求未初始化");
break;
case 1 :
//alert("请求启动,尚未发送");
break;
case 2 :
//alert("请求发送,尚未得到响应");
break;
case 3 :
//alert("请求开始响应,收到部分数据");
break;
case 4 :
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
var data = xhr.responseText;
params.success(JSON.parse(data));
}else {
var data = xhr.responseText;
params.error(JSON.parse(data));
}
break;
}
};
xhr.open("get", params.url, true);
xhr.send(JSON.stringify(params.data));
发送ajax请求,关于ajax请求的具体知识这里就不赘述了~
需要注意的就是关于url的用法,一般会定义一个baseurl,因为比较长,这样后面具体那个接口只需要拼接一下就可以了。
接下来请求就成功了。看一下success中打印的res内容,正是接口中编写的返回的内容:
也可以点network查看详细的请求信息:
7.easy mock接口的创建和在项目中的运用就是以上内容啦~希望能帮助到有疑惑的朋友~