前端開發最大的挑戰之一是等待遊戲。當 API 尚未準備好時,前端團隊通常別無選擇,只能將回應資料硬編碼到 UI 中。這是阻礙前端開發效率的一大瓶頸。
然而,現在有一個非常有效率的解決方案,可以讓您在短短 1 分鐘內模擬任何 API 資料,並將其作為 API 提供給前端團隊。
最好的部分是——模擬資料是動態的,幾乎與真實資料沒有區別。
讓我們開始吧。
取得所需的 JSON。
使用 Apidog 透過 JSON 建立端點。
儲存並取得模擬 URL。
完畢!
當準備模擬 API 時,取得必要的 JSON 資料至關重要。此 JSON 資料表示前端應用程式期望從 API 獲得的回應的結構。有幾種方法可以取得此 JSON 資料:
與後端團隊合作:與後端同事進行討論,以準確了解所需的資料結構。
API 文件探索:查看任何現有的 API 文件,其中詳細介紹了您可以預期的端點和典型響應格式。
現有範例資料:如果正在開發的應用程式是增強或修訂版,則舊版本或類似專案可能有現有範例資料可以用作參考。
手動 JSON 建置:當資料不可預測或尚未建模時,您可以根據預期欄位和類型手動起草範例 JSON 範本。
讓我們考慮一下模擬 API 的以下範例 JSON 結構:
{
"id": 93189357,
"firstName": "Richard",
"familyName": "Mertz",
"email": "[email protected]",
"phone": "(588) 534-9295",
"streetAddress": "789 Noel Fall",
"city": "East Olgastead",
"state": "Missouri",
"zipcode": "04493",
"gender": "female",
"birthday": "2010-01-31",
"bio": "assist advocate 🦝",
"userAgent": "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 5.2; Trident/6.0)"
}
這是一個虛構的使用者 JSON,包含幾個常見欄位。
現在只需複製它即可。如果您已經有了這樣的 JSON,那麼此步驟將花費您不超過 10 秒的時間。
Apidog 是一個用於 API 開發和模擬的高效工具。首先,從Apidog網站下載並註冊帳戶。
完成後,按一下專案中的「建立新端點」。
您必須填入的唯一欄位是端點路徑 - 使用/user/{id}
之類的內容來存取模擬資料。
接下來,捲動到「回應」部分,然後按一下「從 JSON 等產生」。按鈕。
貼上步驟 1 中的 JSON 資料,然後按一下「確定」。 Apidog 將根據您的 JSON 自動產生回應架構和範例。
最後,按一下「儲存」以儲存端點。
整個過程,不包括下載和註冊,只需要大約30秒。
在 Apidog 中保存端點後,您將在端點詳細資訊中找到一個模擬模組。該模組為您提供了一個模擬 URL。只需單擊模擬 URL 即可複製它。
接下來,將此 URL 貼到您的瀏覽器中。
恭喜!您現在已經有了一個可以工作的模擬 API!
這不只是一個靜態的回應;而是一個靜態的回應。每次刷新頁面時,您都會注意到內容發生變化,模擬真實 API 的行為。這種動態響應功能對於在現實環境中測試和開發前端應用程式非常有用,而無需等待後端準備就緒。
Apidog 透過智慧解釋您的輸入 JSON 資料,作為 API 開發和模擬的強大平台運作。下面詳細介紹一下它的功能:
當您將 JSON 貼到 Apidog 時,它會解析結構以建立相應的資料模式,從而建立 API 規範。此架構定義 JSON 中每個屬性的預期格式和資料類型。
Apidog 包含一個整合的模擬引擎,可以有效地充當在您的 PC 上本地執行的輕量級模擬伺服器。該引擎使用您的 API 規格來動態產生模擬資料。
對於動態響應,Apidog 利用 JSON 屬性的名稱來應用faker.js中的適當模擬函數。這些模擬函數負責產生真實的隨機資料。每次瀏覽器刷新都會觸發新模擬資料的生成,給人一種與真實 API 互動的錯覺。
如果您希望每個請求的輸出保持一致,您可以選擇輕鬆地將類比資料從動態切換為靜態:
在 JSON 解析過程中,Apidog 將資料儲存為回應範例。
若要使用此靜態選項,請前往「設定」 ,導覽至「功能設定」 ,然後造訪「模擬設定」 。
將預設模擬類型變更為“首先響應範例”。透過這樣做,模擬 API 將一致地傳回已儲存的回應範例,使您的測試資料穩定且可預測。
如果特定屬性自動產生的模擬輸出無法滿足您的要求,Apidog 允許您輕鬆自訂該屬性的模擬行為。
導航至相關端點的「回應架構」部分。
找到需要調整模擬的屬性。在此屬性的模擬欄位中,選擇與您所需的輸出相符的合適函數。
到目前為止我們討論的模擬 API 是本地託管的。但是,如果您需要與其他人共享或授予本地環境以外的存取權限,Apidog 提供了雲端模擬功能。
若要啟用此功能,請前往設置,導航至功能設置,然後存取模擬設置。開啟雲端模擬選項。
啟用後,您的 API 將可從雲端存取。只需複製提供的雲端模擬 URL 並在瀏覽器中開啟即可存取它。此功能可以輕鬆地與需要遠端存取的團隊成員、利害關係人或測試人員共用您的模擬 API。
例如,嘗試存取此雲端模擬位址以查看其實際情況:
https://mock.apidog.com/m1/644296-613644-default/user/1
這確實是一個全面的 Mock API 解決方案。
Apidog 聲稱是 REAL API 設計優先的開發平台,可用於設計、除錯、測試、文件和模擬。
在實務中,非常人性化,有效提升了前端、後端、測試團隊的工作效率。
您也應該嘗試一下。
http://www.apidog.com/?utm\_source=dev\_to&utm\_medium=IsmailKamil&utm\_content=Mock\_boost 🦴 嘗試 Apidog 🐶
原文出處:https://dev.to/apidog/how-to-mock-apis-in-40s-and-build-frontend-apps-10x-faster-4d3i