@tarojs/plugin-mock使用详解

@tarojs/plugin-mock Taro 数据 Mock 插件

1、安装

$ npm i @tarojs/plugin-mock --save

2、引入插件

修改项目 config/dev.js或者 config/index.js中的 plugins 配置为如下

module.exports = {
    plugins: [
        [
            "@tarojs/plugin-mock",
            {   //Mock 插件可以接受如下参数
                host: "localhost",  //	设置数据 mock 服务地址，默认为 127.0.0.1
                port: 9999, //设置数据 mock 服务端口，默认为 9527
                mocks: { //设置数据 mock 接口
                    "GET /api/user/list": {
                        statusCode: 200,
                        message: "success",
                        data: [
                            {
                                id: 1,
                                name: "zs",
                                age: "23",
                                job: "前端工程师",
                            },
                            {
                                id: 2,
                                name: "ww",
                                age: "24",
                                job: "后端工程师",
                            },
                        ],
                    },
                },
            },
        ],
    ],
}

3、在页面调用接口，接口调用这里应该要全局封装API的，为了清晰使用方法，才直接这样使用

onMounted(() => {
    getData();
});
const getData = async () => {
    let data = await Taro.request({
        url: "http://localhost:9999/api/user/list",
        method: "GET",
        header: {
            "content-type": "application/json",
        },
    });
    console.log(data);
};

4、运行 yarn dev:weapp，运行结束报数据 mock 服务已启动，Server 地址 http://localhost:9999

5、如果项目接口过多，可以在项目根目录创建一个mock文件夹，添加一个api.ts文件

//config/index.js
plugins: [
        [
            "@tarojs/plugin-mock",
            {
                //Mock 插件可以接受如下参数
                host: "localhost",  //	设置数据 mock 服务地址，默认为 127.0.0.1
                port: 9999, //设置数据 mock 服务端口，默认为 9527
            },
        ],
    ],

//mock/api.ts
export default {
    "GET /api/user/1": {
        statusCode: 200,
        message: "success",
        data: [
            {
                id: 1,
                name: "zs",
                age: "23",
                job: "前端工程师",
            },
            {
                id: 2,
                name: "ww",
                age: "24",
                job: "后端工程师",
            },
        ],
    },
}