【WebStorm教程】WebStrom HTTP客户端详解

使用HTTP 客户端插件，您可以直接在 WebStorm代码编辑器中创建、编辑和执行 HTTP 请求 。

当您需要编写和运行 HTTP 请求时，有两个主要用例：

• 当您正在开发 RESTful Web 服务并希望确保它按预期工作、可按照规范访问并正确响应时。
• 当您正在开发处理 RESTful Web 服务的应用程序时。在这种情况下，在开始开发之前调查对服务的访问和所需的输入数据会很有帮助。在开发过程中，您还可以从应用程序外部调用此 Web 服务。当您的应用程序导致意外输出而您的代码中没有检测到逻辑错误并且您怀疑瓶颈是与 Web 服务的交互时，这可能有助于定位错误。

HTTP 请求存储在.http和.rest文件中，并标有图标。

对 HTTP 文件的支持包括以下功能：

• 代码高亮
• 通过OpenAPI定义的主机、方法类型、标头字段和端点的代码完成
• 请求、其部分和响应处理程序脚本的代码折叠
• 请求标头字段和文档标签的内联文档
• 查看HTTP 请求的结构
• 请求消息正文中的 Web 语言中的语言注入
• 实时模板

如有必要，在开始之前，请在设置/首选项对话框 ( )的HTTP 代理页面上配置代理设置。Ctrl+Alt+S

创建 HTTP 请求文件

您可以从临时文件或HTTP 请求类型的物理文件处理 HTTP 请求。每个文件可以包含多个请求，您可以根据需要创建任意数量的文件。

暂存文件可用于在开发期间测试 HTTP 请求。暂存文件不存储在项目中，因此 WebStorm 可以修改它们并添加有关请求的附加信息。当从临时文件执行 HTTP 请求时，响应输出文件的链接将添加到请求下方和请求历史记录文件的顶部。

创建 HTTP 请求暂存文件

• 按下Ctrl+Alt+Shift+Insert并选择HTTP 请求。

物理文件可用于记录、测试和验证 HTTP 请求。物理文件存储在您的项目中，WebStorm 不会修改它们。从物理文件执行 HTTP 请求时，不会修改此文件。有关已执行请求的信息以及指向响应输出文件的链接被添加到请求历史文件的顶部。

创建物理 HTTP 请求文件

• 在“文件”菜单中，指向“新建”，然后单击“ HTTP 请求” 。

移动 HTTP 请求

您可以使用Move重构F6将 HTTP 请求从临时文件移动到物理文件，以及物理文件之间。

1. 在编辑器中，将插入符号放置在要移动的请求处，然后执行以下操作之一：

   • 从主菜单或上下文菜单中，选择Refactor | 移动。
   • 按下Alt+Enter并选择移动 HTTP 请求 意图操作。
   • 按F6。

2. 在打开的“移动 HTTP 请求”对话框中，执行以下操作：

   • 在路径字段中，从列表中选择现有的.http文件之一或单击以找到该文件。

   您也可以手动键入文件的完整路径。如果您指定一个不存在的文件的名称，将自动创建一个具有所提供名称的新文件。

   • 在“请求”列表中，选中要移动的请求旁边的复选框。

编写 HTTP 请求

WebStorm 使用编辑器格式的 HTTP 请求，它提供了一种简单的方法来创建、执行和存储有关 HTTP 请求的信息。您可以使用以下通用语法在创建的 HTTP 请求文件中直接键入它们：

###
Method Request-URI HTTP-Version
Header-field: Header-value

Request-Body

在分隔符之后，您可以输入任何以或###开头的注释。#`//`

要在运行/调试配置、 Search Everywhere和Run Anything中快速找到您的请求，您可以为其命名。

您可以使用编辑器 | 配色方案 | HTTP 请求设置以自定义颜色和样式以突出显示请求语法（名称、注释、参数、标头等）。

要加快编写 HTTP 请求的速度，您可以：

• 单击工具 | HTTP 客户端 | 在 HTTP 客户端中创建请求。如果在编辑器中打开了请求文件，则会将请求模板添加到打开的文件中。否则，这将创建一个新的.http临时文件。
• 单击请求的编辑器面板顶部的 。在弹出菜单中，选择要添加的请求类型。

或者，使用实时模板。在编辑器中，您可以按Ctrl+J查看可用模板列表。例如，gtr扩展为一个简单的 GET 请求；mptr扩展为multipart/form-dataPOST 请求。

要大致了解 HTTP 客户端的可能性，您可以探索HTTP 请求集合，它是少数组合请求的选择。

从 HTTP 请求集合打开一个请求

1. 单击请求编辑器面板顶部的示例快捷方式链接。
2. 在弹出菜单中，选择您要打开的 HTTP 请求集合：

转换 cURL 请求

如果您正在处理cURL请求，您可以在 cURL 请求和编辑器格式的HTTP 请求之间进行转换。

将 cURL 转换为 HTTP 请求

• 将 cURL 请求粘贴到 HTTP 请求文件中。WebStorm 会将其转换为 HTTP 请求格式，并将原始 cURL 请求注释掉以供以后参考。

• 或者，单击HTTP 请求编辑器面板顶部并选择Convert cURL to HTTP Request。

在“将 cURL 转换为 HTTP 请求”对话框中，键入或粘贴要转换的 cURL 请求。

考虑以下示例 cURL 请求：

curl 'http://httpbin.org/' -H 'Connection: keep-alive' -H 'Accept: text/html' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: en-US,en;q=0.9,es;q=0.8'

WebStorm 会将其转换为以下内容：

# curl 'http://httpbin.org/' -H 'Connection: keep-alive' -H 'Accept: text/html' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: en-US,en;q=0.9,es;q=0.8'
GET http://httpbin.org/
Connection: keep-alive
Accept: text/html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,es;q=0.8

###

转换器支持以下 cURL 选项：

选项	描述
-X，--请求	要使用的请求方法。
-H，--标题	要包含在请求中的请求标头。
-u，--用户- 基本的- 消化	要随请求提供的用户凭据，以及要使用的授权方法。
-d，--数据，--数据-ASCII--数据二进制--data-raw--data-urlencode	要在 POST 请求中发送的数据。
-F，--表格	在 POST 请求中发送的multipart/form-data消息。
--url	要获取的 URL（通常在配置文件中指定 URL 时使用）。
-i，--包括	定义输出中是否包含 HTTP 响应标头。
-v，--详细	启用详细操作模式。
-L，--位置	如果请求的页面已移动到不同的位置，则启用重新发送请求。

将 HTTP 请求转换为 cURL

1. 将插入符号放在要转换为 cURL 格式的 HTTP 请求上。
2. 单击Alt+Enter并选择转换为 cURL 并复制到剪贴板。

或者，您可以单击HTTP 请求编辑器面板顶部的转换快捷方式链接，然后选择将 Caret 下的 HTTP 请求转换为 cURL 和复制。

这将根据 HTTP 请求生成一个 cURL 请求并将其复制到剪贴板。

使用响应处理程序脚本

使用响应处理程序脚本，您可以以编程方式对收到的 HTTP 响应做出反应。通过使用这些脚本，您可以自动处理接收到的数据，并根据您指定的条件对其进行验证。响应处理程序脚本作为 HTTP 请求文件中请求的一部分提供，并在收到响应后立即执行。要查看响应处理示例，请打开Requests with Authorization或Requests with Tests 请求集合。

您可以就地或通过引用外部文件将响应处理程序脚本插入到您的请求中。

将脚本插入到请求中

• 要就地插入脚本，请在其前面>加上{% %}：

  GET host/api/test
  
  > {%
  // Response Handler Script
  ...
  %}

• 要从外部文件插入脚本，请在其前面添加>：

  GET host/api/test
  
  > scripts/my-script.js

响应处理程序脚本是用 JavaScript ECMAScript 5.1编写的，具有编码帮助和由捆绑HTTP Response Handler库处理的文档。对于就地脚本，此功能会自动启用。对于外部脚本，您需要手动启用它。

为响应处理程序脚本启用 JavaScript 编码辅助

1. 在编辑器中打开脚本文件。
2. 在上下文菜单中，选择使用 JavaScript 库 | HTTP 响应处理程序。

该HTTP Response Handler库公开了两个用于编写响应处理程序脚本的对象：

• 该client对象存储会话元数据，可以在脚本内进行修改。client在您关闭 WebStorm 之前，该状态会一直保留。client.global保存在as中的每个变量variable_name都可以被后续 HTTP 请求访问为{{variable_name}}.
• response保存有关接收到的响应的信息：其内容类型、状态、响应正文等。

要在编辑器中打开HTTP 响应处理程序库，请将插入符号放在库对象上并按Ctrl+B。

响应处理程序脚本可以包含测试，这使您可以将 HTTP 客户端用作测试框架。要创建测试，请调用该client.test(testName, function)方法。在测试中，您可以通过调用client.assert(condition, message)方法来断言条件，例如：

GET https://httpbin.org/status/200

> {%
    client.test("Request executed successfully", function() {
        client.assert(response.status === 200, "Response status is not 200");
    });
%}

执行 HTTP 请求

1. 如果您要测试自己的 Web 服务，请确保它已部署并正在运行。
2. 如果您定义了环境，请在请求的编辑器面板顶部的Run with列表中选择一个环境。
3. 在装订线中，单击请求旁边的。

如果您在.http文件中定义了多个 HTTP 请求，则可以按顺序运行所有这些请求。为此，请单击请求的编辑器面板顶部。

当请求被执行时，WebStorm 会自动为其创建一个专用的临时HTTP 请求运行/调试配置。如有必要，您可以将其保存为永久运行/调试配置。

在浏览器中打开请求

您可以在设置/首选项对话框 ( )的Web 浏览器和预览页面上指定的浏览器中打开 HTTP 请求。Ctrl+Alt+S

• 按下Alt+Enter并选择在 Web 浏览器中打开意图操作。

使用 HTTP 请求运行/调试配置

当您从编辑器执行 HTTP 请求时，WebStorm 会自动使用请求参数创建临时运行/调试配置。临时运行/调试配置的工作方式与永久运行/调试配置相同。您可以使用“运行/调试配置”对话框更改其设置，并可选择将其保存为永久。

修改 HTTP 请求运行/调试配置

1. 执行以下任一操作：

   • 在编辑器中，右键单击一个请求，然后在上下文菜单中选择Modify Run Configuration。

• 或者，选择运行 | 从主菜单编辑配置，然后在HTTP 请求列表中选择所需的运行/调试配置。

1. 更改所需的配置参数：

   • 在环境列表中，选择将定义请求中使用的环境变量集的环境。
   • 在文件字段中，提供HTTP 请求文件的路径。您可以手动键入路径并在键入时使用路径补全Ctrl+Space，或者在打开的对话框中单击并选择所需的文件夹。
   • 如果您的请求文件包含多个请求，请在请求列表中选择要执行的请求的名称。

保存临时 HTTP 请求运行/调试配置

• 在Run/Debug Configuration选择器中，选择Save <configuration name>。
• 在“运行/调试配置”对话框中，选择配置并单击。

使用运行/调试配置执行请求

• 在运行/调试配置选择器中，选择所需的运行配置。然后单击主工具栏上的 或按Shift+F10。
• 按Alt+Shift+F10，从列表中选择所需的运行配置，然后按Enter。

查看来自 Web 服务的响应

当您执行 HTTP 请求时，WebStorm 会自动将响应保存到.idea /httpRequests/目录下的单独文件中。您可以查看最近存储的 50 个响应，并使用请求历史记录导航到相应的文件。如果请求是从临时文件执行的，则其响应输出的链接也会添加到原始请求下方：

查看收到的回复

1. 切换到服务工具窗口，一旦收到响应就会自动打开。
2. 默认情况下，服务器响应通过内容类型字段以请求标头中指定的格式显示。要将响应转换为另一种格式，请单击并选择Text、JSON、XML或HTML。

如果响应包含二进制文件，该文件也保存在.idea /httpRequests/目录下。如果响应是图像，您可以在“服务”工具窗口中查看其预览。

如果您有响应处理程序脚本，则作为该脚本的一部分执行的测试结果将显示在“服务”工具窗口的“测试”选项卡上。

如果您订阅事件流，WebStorm 会在服务工具窗口中显示事件。在这里，您还可以查看客户端-服务器连接的状态并单击 终止连接。根据内容类型（text/event-stream或application/x-ndjson)，响应将被格式化为纯文本或换行符分隔的 JSON。您可以编写响应处理程序脚本来处理事件流的每一行。

当前不支持将流事件重定向到文件。

在编辑器中打开响应文件

1. 将插入符号放在要打开的响应的链接上。
2. 选择查看 | 从主菜单跳转到源Ctrl+B，或按或F4

或者，您可以Ctrl+Click响应行：

比较临时文件中的响应

当从临时文件执行请求时，响应输出文件的链接将添加到原始请求下方。

• 执行以下任一操作：

  • 将插入符号放在响应文件的链接上。按下Alt+Enter并选择与 <响应名称> 比较意图操作。
  • 单击装订线并从列表中选择与 <response name> 比较：

比较请求历史记录中的响应

当从物理文件执行请求时，响应输出的链接将添加到请求历史记录中。

1. 将插入符号放在响应文件的链接上。选择查看 | 从主菜单跳转到 SourceCtrl+B ，或按或F4在新的编辑器选项卡中打开此文件。
2. 选择查看 | 从主菜单中比较Ctrl+D，或按。WebStorm 将提示您从httpRequests文件夹中打开响应文件。
3. 选择您想与当前文件进行比较的响应文件，然后单击Open。

这两个响应文件将在差异查看器中打开，允许您比较它们的内容：

查看请求历史

WebStorm 自动将最近执行的 50 个请求保存到http-requests-log.http文件中，该文件存储在.idea /httpRequests/目录下的项目级别。借助请求历史记录，您可以快速导航到特定响应以及再次发出任何请求。如果从请求历史中再次发出请求，则其执行信息和响应输出的链接将添加到请求历史文件的顶部。

为防止将请求保存到请求历史记录中，请在请求前添加带有@no-log标记的注释行。如果请求包含一些敏感数据并且您不想记录它，这会很有帮助。

打开请求历史

• 单击请求的编辑器面板顶部。
• 选择工具 | HTTP 客户端 | 从主菜单显示 HTTP 请求历史记录。

将输出重定向到自定义文件或目录

• HTTP 客户端可以将输出重定向到自定义文件或目录。它支持两个用于强制和软重定向的运算符：

  • >>操作员总是创建一个新文件，-n如果请求的文件名已经存在，则为文件名添加一个后缀。
  • >>!如果文件已经存在，操作员会重写该文件。

管理 cookie

通过响应收到的 cookie 会自动保存到.idea /httpRequests/目录下的专用http-client.cookies文件中。可保存的 cookie 数量限制为300 个。cookie的名称和值会自动包含在对与为 cookie 指定的域和路径匹配的 URL 的每个后续请求中，前提是尚未达到到期日期。

您可以通过在请求前添加带有@no-cookie-jar标记的注释行来防止将接收到的cookie 保存到cookie jar 中。

如果要在 HTTP 请求中设置自定义 cookie，可以使用Cookie标头。输入您的 cookie 作为name=value由分号分隔的对列表，例如：

GET http://localhost:80/api
Cookie: theme=dark; country=France

gRPC 请求

HTTP 客户端支持 gRPC 请求。要让 HTTP 客户端将您的请求视为 gRPC 请求，请以GRPC关键字开头。

基于.proto文件，WebStorm 为 gRPC 提供补全：所有已知的 gRPC 服务、特定服务器的一元和服务器流式处理方法，以及请求正文中接受的消息字段。如果您的项目中没有文件，则如果服务器支持gRPC 反射.proto，代码完成仍然可用，它为 HTTP 客户端提供有关可访问服务的信息。

在你开始之前

• 在Settings/Preferences |上安装Protocol Buffers和gRPC插件 插件页面，选项卡Marketplace，如从 JetBrains 存储库安装插件中所述。

从 PROTO 文件生成 gRPC 请求

• 在 PROTO 文件中，单击RPC 方法附近的Generate图标。

目前，可以在 HTTP Client 中执行的支持的 RPC 类型是 unary 和 server-streaming。与普通 HTTP 请求一样，请求正文和响应都是纯 JSON 文件。

配置代理设置

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，选择Appearance & Behavior下的System Settings，然后选择HTTP Proxy。

2. 在打开的HTTP 代理对话框中，选择手动代理配置并指定以下内容：

   • 在主机名和端口号字段中输入代理主机名和端口号。
   • 要启用授权，请选中代理身份验证复选框并在相应字段中输入用户名和密码。