根據接口文檔生成前端請求層提示詞（OpenAPI / Swagger → TypeScript 類型 + 請求函數 + 統一錯誤處理）
後端給了 Swagger / OpenAPI 文檔，前端要寫請求函數和類型定義時用：AI 根據文檔生成帶完整類型的請求層，統一處理鑑權、錯誤、超時和取消，並建議是否改用代碼生成工具，讓接口變化時類型能自動同步。
通用大模型 對話模型通用
你是一名前端架構師。請根據接口文檔為前端生成請求層代碼。 - 接口文檔（OpenAPI 3 的 JSON 或 YAML，或 Swagger 頁面上相關接口的描述）： [粘貼接口文檔] - 前端技術棧：[前端技術棧]（例：React + TypeScript + TanStack Query） - 請求庫：[請求庫]（例：fetch、axios） - 鑑權方式：[鑑權方式]（例：Bearer Token，過期返回 401 需刷新） - 後端統一返回格式與錯誤格式：[返回格式] 請輸出： 1. 方案建議：手寫請求層還是使用代碼生成工具從 OpenAPI 文檔自動生成類型和客戶端；說明各自適合的情況。如果接口多、變化頻繁，推薦生成方案並給出配置示例，同時下面的封裝仍然適用。 2. 類型定義：根據文檔的模型生成 TypeScript 類型；可選字段、可為空字段、枚舉、日期字符串要準確對應；不要用 any。文檔中類型不明確的地方列出來，便於向後端確認。 3. 請求基礎封裝： - 基礎地址與環境配置； - 自動攜帶令牌；遇到 401 時刷新令牌並重試一次，多個請求同時遇到 401 時只刷新一次； - 統一錯誤類型：網絡錯誤、超時、業務錯誤（帶錯誤碼和提示）、未授權； - 超時與請求取消； - 查詢參數與請求體的序列化。 4. 按資源組織的請求函數：每個接口一個函數，參數和返回值都有類型。 5. 與數據請求庫結合（如果使用）：查詢鍵的組織方式、修改數據後讓相關緩存失效。 6. 一個調用示例與對請求層的單元測試示例（模擬請求庫）。
高亮處換成你自己的內容：[粘貼接口文檔]、[前端技術棧]、[請求庫]、[鑑權方式]、[返回格式]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[接口文檔] 最好直接貼 OpenAPI 的 JSON 或 YAML（Swagger 頁面通常提供下載連結），比複製頁面文字準確。文檔很大時，只貼本次要用的接口和它們引用的模型。[後端統一返回格式與錯誤格式] 決定錯誤處理怎麼寫，一定要給出示例。
常見坑：
- 手寫類型時把可空字段寫成必填，運行時拿到 null 就報錯。可選和可為空要區分清楚。
- 多個請求同時返回 401，每個都去刷新令牌，結果刷新接口被調用多次，甚至互相把對方的新令牌作廢。要讓並發的刷新共用同一個請求。
- 接口改了字段名，手寫的類型沒跟着改，編譯通過、運行出錯。接口多時用代碼生成，並在流程中加入「文檔更新後重新生成」的步驟。
追問技巧：追問「把這個請求層改造成支持多個後端服務（不同基礎地址與鑑權）」，或「後端返回的日期是字符串，如何在請求層統一轉換為日期對象」。
示例輸出
示例，僅供參考（節選）
ts
export type OrderStatus = 'PENDING' | 'PAID' | 'CANCELLED'
export interface Order {
id: number
status: OrderStatus
amountCents: number
paidAt: string | null // 文檔標註 nullable，ISO 8601 字符串
remark?: string // 文檔中非必需字段
}
export class ApiError extends Error {
constructor(public status: number, public code: string, message: string) { super(message) }
}
let refreshing: Promise<void> | null = null // 並發 401 時共用同一次刷新
async function request<T>(path: string, init: RequestInit = {}, retried = false): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`, {
...init,
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getToken()}`, ...init.headers },
})
if (res.status === 401 && !retried) {
refreshing ??= refreshToken().finally(() => { refreshing = null })
await refreshing
return request<T>(path, init, true)
}
if (!res.ok) {
const body = await res.json().catch(() => ({}))
throw new ApiError(res.status, body.code ?? 'UNKNOWN', body.message ?? '請求失敗')
}
return res.json() as Promise<T>
}
export const getOrder = (id: number) => request<Order>(`/orders/${id}`)同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～