不要等待！模拟API

现代的Web应用程序开发通常涉及在前端和后端之间的松散耦合，经常由单独的团队处理。这可能导致同步挑战。一种解决方案是模拟后端API，创建一个模仿预期行为的“假”服务器。这个过程被称为嘲笑。理想情况下，嘲笑可以使前端发展独立进行，而无需直接的后端依赖。尽管存在多种模拟方法，但这可能令人生畏。

本文展示了使用框架 - 不合Snostic方法（适用于任何框架或香草JavaScript）的有效API模拟及其在新应用或现有应用程序中的实现。

海市rage：客户端模拟解决方案

我们将利用Miragejs，一个客户端模拟框架。 Mirage在浏览器中运行，拦截XMLHttpRequest并Fetch请求以模拟API响应。它提供了一个用户友好的界面，并简化了模拟过程。

我们将使用VUE构建一个简单的待办事项应用程序（尽管该方法是独立于框架的）。

建立海市rage

安装Mirage：

 ＃npm
npm i miragejs -d

＃纱
纱线添加miragejs -d

最佳文件夹结构：

 <code>/ ├── public ├── src │ ├── api │ │ └── mock │ │ ├── fixtures │ │ │ └── get-tasks.js │ │ └── index.js │ └── main.js ├── package.json └── package-lock.json</code>

创建api/mock/index.js ：

 // api/mock/index.js
从'miragejs'导入{server};

导出默认函数（{Environment ='development'} = {}）{
    返回新服务器（{
        环境，
        路由（）{
            //此处定义的路线
        }，，
    }）;
}

在您应用程序的Bootstrap文件中（例如， src/main.js for Vue）：

 // main.js
从'./api/mock/index'导入CreateServer;

if（process.env.node_env ==='开发'）{
    createserver（）;
}

此条件可确保超越海市rage楼，从生产制造中排除。

幻影如何工作

Mirage使用伪造者库是客户端。伪装者拦截请求，阻止它们到达实际服务器并将其路由到模拟的Mirage服务器。 DevTools的网络选项卡不会在内部处理时显示Mirage请求。

处理请求

让我们创建A /api/tasks端点以获取待办事项项目（使用Axios）：

 //组件/任务
导出默认{
    异步创建（）{
        尝试 {
            const {data} =等待axios.get（'/api/tasks'）;
            this.tasks = data.tasks;
        }捕获（e）{
            控制台（E）;
        }
    }
};

最初，Mirage将记录指示未定义路由的错误。我们通过在api/mock/index.js中添加路由处理程序来解决此问题：

 // api/mock/index.js
路由（）{
    this.get（'/api/tasks'，（）=>（{{
        任务：[[
            {id：1，文字：“喂猫”}，
            {id：2，文字：“洗碗”}，
        ]，，
    }））;
}，，

Mirage支持各种HTTP方法（ get ， post ，PAST， patch ， put ， delete ， options ）。

带有Mirage数据层的动态数据

对于动态数据，Mirage提供了一个seeds钩和轻量级数据库。让我们重构：

 // api/mock/index.js
种子（服务器）{
    server.db.loaddata（{
        任务：[[
            {id：1，文字：“喂猫”}，
            {id：2，文字：“洗碗”}，
        ]，，
    }）;
}，，

路由（）{
    this.get（'/api/tasks'，（schema）=> {
        返回schema.db.tasks;
    }）;
    this.post（'/api/tasks'，（架构，请求）=> {
        const task = json.parse（request.requestbody）.data;
        返回schema.db.tasks.insert（task）;
    }）;
    this.delete（'/api/tasks/：id'，（架构，请求）=> {
        const ID = request.params.id;
        返回schema.db.tasks.remove（id）;
    }）;
}

路由处理程序中的schema参数可访问Mirage数据库。 request参数包含请求详细信息。

将幻影集成到现有应用程序中

要将Mirage集成到现有应用程序中，请使用passthrough()方法处理未经手的请求：

路由（）{
    this.get（'/api/tasks'，（）=> {...}）;
    this.passTrough（）; //处理未经处理的请求
}

您还可以指定自定义urlPrefix ：

路由（）{
    this.urlprefix ='https：//devenv.ourapp.example';
    this.get（'/tasks'，（）=> {...}）;
}

这允许Mirage和真实API之间的无缝过渡。

结论

Miragejs提供了一种简化的客户端解决方案，用于API模拟，从而消除了对外部流程或服务器端知识的需求。它的易用性和功能强大的功能使其成为前端开发人员的宝贵工具。有关更多高级功能和教程，请参阅官方MirageJS文档。可以在GitHub上找到一个工作示例。

以上是不要等待！模拟API的详细内容。更多信息请关注PHP中文网其他相关文章！