mock拦截ajax请求

html文件:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
</head>
<body> 
    <script>MOCK = true</script>
    <script src="./mock/index.js"></script>
    <script>
        $.ajax({
            url: '/user/userinfo',
            type: 'get',
            dataType: 'json',
            success: (data) => {
                console.log(data)
            }
        })
        $.ajax({
            url: '/user/userinfo',
            type: 'post',
            dataType: 'json',
            success: (data) => {
                console.log(data)
            }
        })
    </script>
</body>
</html>

index.js文件:地址保持一样才能拦截

if (MOCK == true) {
    Mock.mock('/user/userinfo', 'get', {
        id: '@id',
        username: '@cname',
        date: '@date',
        description: '@paragraph'
    })
    Mock.mock('/user/userinfo', 'post', {
        id: '@id'
    })
}

 

### 如何使用 MockJS 拦截 AJAX 请求 为了在前端开发过程中模拟服务器响应,MockJS 提供了一种简单有效的方式拦截 AJAX 请求并返回预设的数据。这使得开发者可以在没有实际后端服务的情况下推进前端工作。 #### 安装 MockJS 在项目根目录下通过 npm 安装 MockJS 作为开发依赖: ```bash npm install mockjs --save-dev ``` #### 配置 MockJS 创建一个新的 JavaScript 文件用于配置 MockJS 路径映射规则。此文件通常命名为 `mock.js` 或者放置在一个专门的 mocks 文件夹内。下面是一段简单的例子展示如何设置路径以及相应的假数据[^1]。 #### 设置 API 模拟规则 ```javascript // 导入 MockJS 库 import Mock from 'mockjs' // 定义 GET /api/users 接口的行为 Mock.mock('/api/users', { "users|1-10": [ { "id|+1": 1, "name": "@first", "age|18-60": 18, "address": "@county(true)" } ] }) // 如果是 POST 方法,则这样定义 Mock.setup({ timeout: '200-600' }) Mock.mock(/\/api\/login/, 'post', {"code":200,"msg":"success","data":{"token":"abc"}}) ``` 上述代码片段展示了两种不同类型的 HTTP 请求——GET 和 POST 的处理方式。对于 `/api/users` 这个 URL 下的所有 GET 请求都会被拦截下来,并按照给定模式生成一组虚拟用户列表;而针对登录操作 (`/api/login`) 发送过来的任何 POST 请求都将收到一个固定的 JSON 结构作为回应[^3]。 #### 启动应用时加载 MockJS 为了让这些设定生效,在应用程序入口处(比如 main.js 中),需要引入之前编写的 mock 文件: ```javascript if (process.env.NODE_ENV === 'development') { require('./mock/mock') } ``` 这段逻辑确保只有当环境变量 NODE_ENV 设为 development 即处于本地调试状态时才会启用模拟功能,从而不影响生产环境中真实的服务调用[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值