通过UI更新理解HTTP动词

多个HTTP动词的重要性

在1:17，Tim解释了为什么一个功能性的Postman克隆必须支持不仅仅是GET请求。 虽然GET方法用于从服务器检索数据或信息而不影响服务器状态，其他HTTP方法如POST、PUT和PATCH则修改资源或创建新资源。

例如：

• POST方法将请求数据发送到服务器以在指定位置创建新资源。

• PUT方法替换指定位置的整个资源，使其成为幂等请求。

• PATCH方法允许对现有资源进行部分修改。

• DELETE方法移除指定的资源。

Tim指出，正确支持这些HTTP请求方法可以确保Postman克隆能够处理REST API、RESTful API和其他带有实际请求数据和响应正文行为的Web服务。

将HTTP动词下拉菜单添加到UI

Tim通过调整API输入框尺寸来开始增强UI，以腾出空间为选择HTTP动词的下拉菜单（组合框）。 他将其重命名为HTTP动词选择，并暂时硬编码GET和POST（2:42）。

Tim解释了为什么这就足够了：HTTP动词在HTTP规范中是标准化的，它们很少更改。 使用静态列表可以避免不必要的复杂性，并确保快速性能，尤其是像TRACE、CONNECT和OPTIONS这样较少在基础Postman克隆中需要的动词。

配置下拉菜单行为

一个关键的UI细节，Tim解释道，是将下拉菜单样式切换为下拉列表，使用户只能选择有效的HTTP请求方法（4:47）。 这可以防止错误并确保应用程序正确解释所选的动词，无论是GET请求、POST请求，还是稍后的PUT、PATCH或DELETE请求。

他还调整了下拉菜单的宽度以容纳更长的动词，如DELETE或PATCH，而不破坏布局（5:51-7:27）。 这种对细节的关注确保了一个专业的Web应用程序UI，既能自我解释，又能发挥功能。

引入请求体和结果选项卡

在7:57，Tim添加了一个选项卡控件来处理请求体输入和API响应。 这将体和结果分离到不同的选项卡中：

• 体选项卡：允许用户输入JSON数据，通过POST方法或PUT请求将数据发送到服务器。

• 结果选项卡：显示服务器返回的响应正文，包括HTTP状态代码和返回的数据。

这种设计确保请求体中的敏感数据与检索到的信息明确分开，并支持对RESTful API的多种HTTP方法进行干净处理（8:00）。

区分输入和输出文本框

Tim强调体文本框和结果文本框之间的区别（12:16）。 体文本是可编辑的，因此用户可以输入请求数据，而结果文本是只读的，以防止误修改服务器的响应。

他还将结果选项卡从"输出"重命名为结果以提高清晰度。 这种简单的命名使得HTTP动词列表更加直观，尤其是在处理多个相同请求或幂等方法如GET、PUT和DELETE时（12:44）。

测试GET请求

Tim演示了UI与GET请求协同工作的正确方式。 通过粘贴URL并选择GET，用户从服务器检索数据，这些数据会显示在结果选项卡中。 这一过程反映了Web应用程序如何与网页或Web服务互动以检索信息或验证资源是否存在（13:22）。

他指出，多个GET请求或重复相同的GET请求如果资源状态没有改变会检索到相同的信息，突出了GET安全方法属性（14:00）。

清理和设置默认值

在14:34，Tim清理了下拉菜单并将默认选择设置为GET（16:05）。 这确保用户立即看到一个有效的HTTP请求方法，避免混淆。

此外，当用户点击"Go"时，应用程序自动切换到结果选项卡，提供流畅的体验。 这展示了处理多个请求场景，并确保多个相同的请求产生一致的响应正文（17:02）。

为POST请求做准备

Tim解释道，尽管UI现在支持GET和POST，但通过POST方法发送数据的实际功能仍需实现。 体选项卡允许用户输入请求数据，模拟发送POST请求、PUT请求或PATCH请求，以修改现有资源或在指定位置创建新资源。

他鼓励学习者将此作为实践挑战，尝试JSON请求体，并针对支持GET和POST请求练习的服务进行测试，如JSONPlaceholder（20:11）。

要点总结

Tim Corey的视频强调了理解HTTP动词和HTTP请求方法在Web应用中的重要性：

• GET方法：从服务器检索数据而不改变资源状态。

• POST方法：向服务器发送数据以创建新资源。

• PUT方法：替换整个资源（幂等请求）。

• PATCH方法：对现有资源进行部分修改。

• DELETE方法：移除指定资源。

• HEAD, OPTIONS, TRACE, CONNECT方法：提供元数据、通信选项或消息回环测试能力。

Tim的方法表明，一个设计良好的UI可以使HTTP动词列表直观，支持安全方法和幂等方法，并为应用能够可靠地处理REST API和RESTful API做好准备。 通过将请求体、结果和动词选择分开，Postman克隆成为测试Web服务和理解在实际应用中超文本传输协议的实用工具。