Mock模拟接口

UmiJS集成了Mock功能,无需配置即可直接使用,十分方便。Mock接口的配置约定放在工程根目录的mock文件夹下。

Mock使用例子

mock文件下的文件可以任意命名,不过还是推荐按照后端接口的意义来命名。下面例子我们模拟了一个后端接口GET /api/v1/student/:id,Mock代码中定义了其返回数据。

export default {
    "GET /api/v1/student/:id": {
        code: 0,
        msg: "success",
        data: {
            studentId: 3,
            studentName: "汤姆",
        },
    },
};

我们可以直接用浏览器访问例如/api/v1/student/1查看Mock返回的内容。

模拟延时

有时我们实际的后端接口可能具有较长的延时,我们希望前端有一个“加载中”之类的提示,但上面Mock的写法可能返回太快了看不到延时的效果,实际上Mock也可以模拟这种延时逻辑,下面是一个例子。

export default {
    "GET /api/v1/student/:id": (req: any, res: any) => {
        setTimeout(() => {
            res.send({
                code: 1,
                msg: "success",
                data: {
                    studentId: 3,
                    studentName: "汤姆",
                }
            });
        }, 2000);
    },
};

关闭Mock

如果需要关闭Mock,可以添加如下配置:

export default defineConfig({
    mock: false,
});

有时是需要我们手动关闭Mock的,比如后端接口已经开发完成了,我们要将Mock接口切换到测试环境接口,此时就可以配置mock: false将其手动关闭。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap