如何以 10 倍速度构建前端应用程序

我们都遇到过这样的情况：后端没有准备好 API，因此前端开发人员需要手动对响应进行硬编码。

这很耗时，并且会带来很多间接问题。

今天，我们将探讨 Requestly 如何通过减少对后端开发人员的依赖来帮助您以至少 10 倍的速度构建前端应用程序。

让我们开始吧。

动图

简而言之，我们正在详细介绍这些主题。

1. 当 API 不可用时，通常的工作流程是怎样的？
2. Requestly 如何通过用例解决该问题。
3. Requestly 可以帮助您实现更多目标。

请求星号⭐

1. 当 API 不可用时，通常的工作流程是什么？

在大多数情况下，如果没有 API 逻辑，就无法有效地实现适当的前端。

我们可以使用 Mirage JS 模拟 API，但它仍然不能完全解决问题。

让我们看看当尚未准备好 API 时，任何前端开发人员的通常开发工作流程是怎样的。

⚡ 后端开发者创建 API 契约，定义前端如何与后端服务交互。这些契约以 JSON 格式共享，详细说明了预期的请求和响应结构。

⚡ 前端开发人员采用这些 API 约定，并将预期响应直接硬编码到他们的代码中（解决方法）。这样做通常是为了能够立即开发和测试 UI，而无需等待后端完全实现。

⚡ 当前端开发人员需要集成实际 API 或提交拉取请求（将代码更改合并到代码库的请求）时，他们必须删除硬编码的响应。这是必要的，以确保代码与实时 API 交互，而不是与静态数据交互。

⚡ 如果审阅者在拉取请求中留下评论，前端开发人员可能需要恢复到硬编码的响应，以根据反馈继续优化 UI，因为实际的 API 当时可能不可用或不稳定。对于简单的事情来说，这会非常麻烦。

⚡ 同样，在 API 集成期间，如果出现问题（例如 API 未返回预期数据），开发人员可能需要恢复硬编码响应以继续处理 UI，而不会受到后端问题的阻碍。

⚡ 这种back-and-forth移除和重新整合的操作hardcoded responses会导致代码库混乱，而且非常耗时。开发人员可能会花费大量时间来管理这些变更，而不是专注于功能构建。

⚡ 对硬编码响应的依赖使得测试各种边缘情况变得非常困难。开发人员必须反复修改硬编码数据来测试不同的情况，这可能会导致错误和不一致。

✅ 对于开发者来说，一个简单的解决方案是使用模拟 API 响应的模拟服务器，而不是硬编码响应。这允许进行更动态的测试，并减少反复修改代码的需要。

让我们在下一节中看看如何解决这个问题！

2. Requestly 如何解决该问题，包括用例。

如果您曾经开发过网站，您就会知道每个应用程序都需要调用服务器来获取其资源。

它可以是 API 请求、脚本或任何其他在网页上呈现的内容。

Requestly是一个开源前端开发平台，可帮助开发者更快地测试和调试其应用，而无需多个部署周期。它可以帮助您：

✅ 在后端 API 尚未准备好时构建功能。

✅ 无需部署周期即可在生产中测试代码更改。

✅ 测试、验证、模拟 API 响应等等。

🎯 如何安装 Requestly？

您可以下载桌面应用程序或在您喜欢的浏览器（包括 Chrome、Safari 和 Brave）上找到它。

正如我之前讨论过的那样，在代码库中硬编码响应，设置好 Requestly 后，您无需再进行此操作。在后端和前端相互理解的基础上，确定 API 契约，然后在 Requestly 仪表板上为所需的 API 端点进行定义。

它以来自服务器的方式提供响应，以避免对代码库或任何其他复杂配置进行任何更改。

团队可以就回复达成一致。回复可以添加到 Requestly 仪表盘，这样两个团队就能在同一功能上顺利推进，不会出现任何大问题！

还有许多其他用例，例如 Requestly，可以帮助避免意外提交模拟代码的风险。但是，我将探讨一个用例，说明如何使用它来更新生产 API 的响应。

让我们看看如何使用 Requestly 响应规则来更改 HTTP 请求的响应主体，而无需对服务器内容进行实际更改。

首先，让我们创建一个新规则来修改 HTTP 请求的响应主体。

我们将仅通过不同的例子和案例来研究修改响应规则。

如果您想快速开始，您还可以获得各种模板选项。

🎯 维基百科快速概览更新 - 静态覆盖。

我们将探索如何使用固定数据更新快速查看数据，以便在将鼠标悬停在维基百科上的任何单词上后都会显示相同的响应。

与往常一样，我们将使用 REST API。

✅解释。

-→ ：这将包含与和 等Request选项一起使用的主要 API 端点 URL 。containsequal

-→ Response status：这是随响应发送的状态代码，可帮助您轻松识别日志。您可以根据具体情况选择、3xx等状态代码。4xx5xx

-→ Response：我们可以使用静态响应数据或动态请求，通过代码添加自定义逻辑。如果 API 调用冗长，或者需要同时管理多个请求，使用Async/Await会非常高效。它真的非常有用 :)

我们将在这个例子中使用Static Response，这是静态覆盖的另一种说法。

如果你不知道什么是快速预览，那么当有人将鼠标悬停在文本上以了解更多信息时，就会显示它。你应该在维基百科上看到过它。

要获取 API 端点，只需开始在维基百科上搜索并过滤网络请求以获取负责快速查看的请求。

负责的 API 端点是：en.wikipedia.org/api/rest_v1。

使用示例响应设置规则，我刚刚使用了从网络日志中抓取的 Amazon 的 JSON 响应。您可以从GitHub 上的这个 gist中复制此响应。

这应该会更新任何悬停单词的快速预览。

如您所见，规则已正确应用。

输出。

最好的部分是 Requestly 提供了自己的网络日志，您可以在其中捕获请求并分析许多其他内容。

🎯 亚马逊搜索建议 - 动态覆盖。

让我们了解如何使用此示例来更新亚马逊搜索建议的响应Dynamic JavaScript，这是动态覆盖的另一种说法。

要获取 API 端点，只需开始在亚马逊上搜索并过滤网络请求以获取负责搜索建议的请求。

我们获得的 API 端点是：https://completion.amazon.in/api/2017/suggestions。

-→🎯 逻辑 1。

我们使用一条规则，在 Amazon 查询的第一个建议中附加多个带有 API URL 的建议。查询定义如下！

function modifyResponse(args) {
  const {method, url, response, responseType, requestHeaders, requestData, responseJSON} = args;
  // Change response below depending upon request attributes received in args
  res= responseJSON
  res.suggestions[0].value= res.suggestions[0].value + " - " + res.suggestions.length + " - " + url
  return response;
}

规则实施后，页面上会清晰地显示已应用该规则的消息。我同时使用了多条规则，页面清晰地显示了这些规则的具体应用情况。

输出。

-→🎯 逻辑 2。

将上述规则更改为仅显示包含第二条建议的长度的响应，而不附加 URL。

res.suggestions[1].value= res.suggestions[1].value+" - "+responseJSON.suggestions.length;

输出。

-→🎯 逻辑 3。

requestly让我们将规则中的第一个建议完全更改为：

res.suggestions[0].value='requestly';

输出。

-→🎯 模拟错误。

在测试过程中，你经常会遇到这样的情况：如果发生 API 错误，你需要测试你的功能，因为在后端模拟某些错误可能比较棘手。我们将响应代码如下所示400。

由于错误，没有可见的搜索建议！

您可以在官方博客上阅读有关如何使用修改 API 响应规则的更多信息。

或者观看这个视频！

3. 更简要地介绍 Requestly 可以帮助您实现的目标。

您还可以做很多其他的事情，例如：

-→通过将 HTTP 请求（API 调用/文件）从一个环境重定向到另一个环境，直接在暂存/生产站点上测试脚本或 API。

-→ 修改标题或在外部网页上注入自定义脚本/样式。

-→通过对操作名称和查询数据应用额外的定位来拦截、修改和模拟 GraphQL 查询。

它对 QA 软件工程师或前端团队非常有用。让我们来看看一些令人兴奋的功能：

✅ 您可以创建工作区来共享规则、模拟和会话。更快的协作可以快速解决问题！

✅ 您可以记录会话，并且每当您从仪表板测试规则时，它都会自动完成。

✅ 您可以从仪表板启用/禁用规则。

✅ 完成一些基本操作（例如创建规则）后，您可以获得免费积分并购买高级计划。

✅ 您可以阅读文档，了解它们与 Charles Proxy、Fiddler、Resource Override、ModHeader、HTTP Toolkit、Proxyman、Wireshark、Mockoon、BirdEatsBug 和 Jam 等竞争工具相比的表现。

您可以按照快速入门指南并阅读操作指南，它们可以解答您的大部分问题。

我还建议观看这个快速演示来开始使用 Requestly！

我觉得可以肯定地说，Requestly 至少能帮你以 10 倍的速度构建前端应用。它简单又高效。

它是值得的，许多国际团队已经在他们的工作流程中使用它。

如果您有任何问题或反馈，请告诉我。

祝您拥有美好的一天！下次再见！

你可以在anmolbaranwal.com 查看 我的作品。 感谢阅读！🥰

“写得越多，激发的灵感就越多！”

动图