WebStorm是一款深受廣大程序員喜愛的 JavaScript 開發和Web前端開發工具，完美適應各種復雜客戶端開發和Node.js的服務器端 開發。 本文我們主要講解如何在WebStorm中使用REST API。

點擊下載WebStorm最新試用版

如果您正在使用RESTful應用程序或正在開發REST API又或是在代碼中使用過它們 ，那么你可能對OpenAPI和Swagger有所了解。如果您不了解Swagger，那么你需要記住 Swagger是可以幫助您為API創建文檔的一組工具，而OpenAPI是用于描述REST API端點的格 式。

在此文中，我們將了解WebStorm如何幫助您創建和編輯API文檔，使用API調用編寫代碼以及測試調用。

首先，我們需要安裝OpenAPI Specification插件。從插件存儲庫或IDE Settings | Plugins項卡中的"Marketplace tab" 安裝它。

要在您的項目中創建新的API規范，請使用file “New…”菜單或“ project view” 中的“ new…”彈出窗口，然后選擇“ OpenAPI Specification”。您可以在JSON和YAML之間選擇。

WebStorm將在代碼完成彈出窗口中為您顯示帶有簡短描述的部分名稱，并且IDE還 將檢查該文件是否具有所有必需的部分。

如果您已有OpenAPI規范，則可以在IDE中看到一些使用Swagger UI構建的文檔。使 用編輯器右上角的圖標在編輯和預覽模式之間切換。本文檔是交互式的，您可以直接在此預 覽中測試端點。

代碼中完成API

規格文件中最重要的部分是" paths "部分列出了可用的端點及其支持的HTTP方法。在項目中的任何地方都有規格文件后，您就可以在JavaScript和TypeScript代碼中查看有關這些API的建議。

當前，它們在兩種情況下顯示：

• 用 fetch()方法調用
• 從axios庫中使用get()或post()類似的方法

我們計劃在不久的將來增加對Express方法的支持。

在您的項目中擁有正確的OpenAPI規范不是從這些完成建議中受益的唯一方法–您還可以指定一個可以使用該規范的URL。為此，請轉到“Preferences/Settings | Languages and Frameworks | OpenAPI Specification”。單擊加號圖標，然后將鏈接粘貼到JSON或YAML文件。

如果您使用的是某些第三方服務的API，則可以檢查GitHub上的openapi-directory存儲庫（在APIs文件夾中）是否有社區維護的OpenAPI規范。如果存在，則獲取指向規范文件的直接鏈接，并將該URL添加到IDE Preferences/Settings中

使用HTTP客戶端測試API調用

WebStorm具有內置的HTTP客戶端，可用于測試REST API。

在OpenAPI規范文件中，您可以通過單擊方法旁邊的圖標，以HTTP客戶端理解的格式快速生成新請求。然后，您可以根據需要使用代碼完成建議來添加其他參數。

或者，您可以使用意圖直接從JavaScript或TypeScript文件中創建新請求。 當插入符號位于fetch或axios方法中URL上時按Alt + Enter，然后選擇Generate request。

您可以將授權和任何其他env變量存儲在特殊的位置（http-client.private.env.json文件–在WebStorm文檔中找到有關此內容的更多信息）。

該插件具有許多有用的功能，您可以嘗試；我將重點介紹其中兩個。一種是與OpenAPI代碼生成器集成，您可以使用它來創建基于API規范的庫。另一個是“ 與最新規格修訂比較”操作，您可以從“ Find Action”彈出窗口中調用該操作（ Cmd / Ctrl + Shift + A） ），并用于查找項目的OpenAPI規范中引入的任何重大更改。

結束

今天的內容就到這里，歡迎下載Webstorm體驗最新功能并在下方評論區分享您對該產品的想法。您的反饋意見可幫助我們在以后的文章教程中找到正確的方向，慧都作為JetBrains的正版代理商現WebStorm正版授權最低僅售529！