前端怎么使用easymock模拟数据请求

最新推荐文章于 2025-06-19 18:12:58 发布

paopaosama

最新推荐文章于 2025-06-19 18:12:58 发布

阅读量7.2k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： js 文章标签：接口 easymock ajax

本文链接：https://blog.csdn.net/paopaosama/article/details/86687364

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用easymock平台自建前端接口，适用于无后端支持或接口开发中的场景，通过创建项目、设置接口及请求方式，实现前端数据请求，加速开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端经常遇到的一个场景就是需要请求后台数据。

请求数据就是请求接口：

发起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内容，正是接口中编写的返回的内容：