Hoppscotch 是轻量级、基于 Web 的 API 开发套件。它从头开始构建,考虑到易用性和可访问性,为 API 开发人员提供了简约、不显眼的 UI 所需的所有功能。它是免费使用的,并且作为完全开源的额外福利!

创建集合

创建集合并在集合下添加请求始终是一个好习惯。要创建一个集合,首先单击集合按钮,然后单击新建按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--CZICfy6G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/yhqepby7ajjoj2smlwi9.png)

为集合指定一个合适的名称,然后单击保存。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--uE8vVzt9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/z584xctj92yhv4r1boq3.png)

创建的新收藏将显示在我的收藏选项卡下。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GkqU_b4h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/llb2pcusmkfjhk22txz3.png)

在集合下添加第一个请求

在这篇博客中,我将使用https://reqres.in/提供的 REST api。我使用了支持 http get 方法的 SINGLE USER api。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--HHnuy6_m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/jv53ferer95swiafamsg.png)

复制 api 端点并粘贴到 hoppscotch 中。在点击 api 之前,将 api 保存在之前创建的集合中。为此,单击箭头按钮,然后单击另存为按钮。

[中添加请求](https://res.cloudinary.com/practicaldev/image/fetch/s--v0H1GXyz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/rxadg9encpcy1b0hyn0o.png)

提供请求名称,选择要在其中保存请求的所需集合,然后单击保存按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--keRybat---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/yakw64wo7x2wo6tedwfr.png)

新请求将显示在新创建的集合下。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--S4kRxATy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/fhd60lki4c1ikgrfjqfa.png)

现在单击发送按钮并查看来自 api 的响应。

[的响应](https://res.cloudinary.com/practicaldev/image/fetch/s--v8wpL5vl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/bnk5dprhfgcf711wzgtf.png)

创建环境并在其下添加变量

单击环境按钮,然后单击新建按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--sPiT9cA1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/zigpzo1jwi4fq5pize2m.png)

添加环境名称并单击保存

[](https://res.cloudinary.com/practicaldev/image/fetch/s--RDwPNXzV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/2xnw52gajjwyhv4es6nr.png)

要添加变量,请单击新创建的环境,然后单击添加新按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s---Et1urmd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/s1k9x68x3o321pkwodib.png)

添加变量名称和变量值。之后点击保存按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s---LenJeU7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/uploads/articles/sgl5q898yid141pmxem6.png)

访问环境变量

要访问环境变量,请在请求部分使用 << variable_name >> 对象,并确保从请求的右上角选择正确的环境。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--mAX18-Um--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/uploads/articles/o2dsd7vfhy8baoi2gd3b.png)

现在单击发送,将显示与之前相同的结果。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--bKoVzrXj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/gh5gkpxbogvcac3v2cqu.png)

为请求添加测试(断言)

这些是对响应执行的一些测试。可以从此链接找到更多测试https://docs.hoppscotch.io/features/tests

[](https://res.cloudinary.com/practicaldev/image/fetch/s--pXPrOBeD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/7q9w1zd05ujrb2ja2ylm.png)

测试结果将显示在“测试结果”选项卡中

[](https://res.cloudinary.com/practicaldev/image/fetch/s--blqXl6Wv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/4vf2au9xzozwhi4p5kj9.png)

如果您需要对此帖子的任何澄清,请在评论部分下方发表评论。