当前位置：首页 > news >正文

《60天AI学习计划启动 | Day 40: 前端 AI SDK 抽象（aiClient + hooks）》

news 2026/6/11 14:17:10

Day 40：前端 AI SDK 抽象（aiClient + hooks）

学习目标

抽象一套通用的 aiClient 接口（不用关心具体后端实现细节）
封装常用 hooks：useChat（非流式）、useStreamingChat（流式）
为后面 在任何项目中快速接 AI 打基础

核心知识点

aiClient 抽象
- 核心思想：前端只依赖一个统一客户端，不直接散落 fetch('/api/xxx')
- 可以定义接口：
```
interface AIClient {chat(payload: ChatRequest): Promise<ChatResponse>streamChat(payload: ChatRequest): AsyncIterable<ChatChunk>
}
```
- 具体实现可以对接不同后端（自家服务 / OpenAI / 其他网关）
hooks 层
- useChat(client)：一次性请求，适合短回答、非流式场景
- useStreamingChat(client)：基于 AsyncIterable 或 SSE 读流，适合聊天页面

实战作业（附完整代码）

作业 1：定义 `AIClient` 接口 + 一个 HTTP 实现

// aiClient.ts
export interface ChatMessage {role: 'system' | 'user' | 'assistant'content: string
}export interface ChatRequest {messages: ChatMessage[]meta?: Record<string, any>
}export interface ChatResponse {answer: stringusage?: {promptTokens?: numbercompletionTokens?: numbertotalTokens?: number}
}export interface ChatChunk {type: 'delta' | 'final' | 'error'content?: stringerror?: string
}export interface AIClient {chat(req: ChatRequest): Promise<ChatResponse>streamChat(req: ChatRequest): AsyncIterable<ChatChunk>
}// 一个基于 HTTP 的简单实现（假设后端有 /api/chat 和 /api/chat/stream）
export class HttpAIClient implements AIClient {constructor(private baseUrl = '') {}async chat(req: ChatRequest): Promise<ChatResponse> {const res = await fetch(this.baseUrl + '/api/chat', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(req)})if (!res.ok) throw new Error(`HTTP ${res.status}`)const data = await res.json()return {answer: data.answer ?? '',usage: data.usage}}async *streamChat(req: ChatRequest): AsyncIterable<ChatChunk> {const res = await fetch(this.baseUrl + '/api/chat/stream', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(req)})if (!res.body) throw new Error('No response body')const reader = res.body.getReader()const decoder = new TextDecoder()let done = falselet buffer = ''while (!done) {const chunk = await reader.read()done = chunk.doneif (chunk.value) {buffer += decoder.decode(chunk.value, { stream: true })const parts = buffer.split('\n\n')buffer = parts.pop() || ''for (const part of parts) {const line = part.trim()if (!line.startsWith('data:')) continueconst jsonStr = line.slice(5).trim()if (!jsonStr || jsonStr === '[DONE]') continueconst data = JSON.parse(jsonStr) as ChatChunkyield data}}}}
}

作业 2：`useChat`（非流式）hook

// useChat.ts
import { useState, useCallback } from 'react'
import type { AIClient, ChatMessage } from './aiClient'interface UseChatOptions {client: AIClientinitialMessages?: ChatMessage[]
}export function useChat({ client, initialMessages = [] }: UseChatOptions) {const [messages, setMessages] = useState<ChatMessage[]>(initialMessages)const [loading, setLoading] = useState(false)const [error, setError] = useState<string | null>(null)const send = useCallback(async (content: string) => {const text = content.trim()if (!text || loading) returnsetError(null)const userMsg: ChatMessage = { role: 'user', content: text }const newMessages = [...messages, userMsg]setMessages(newMessages)setLoading(true)try {const res = await client.chat({ messages: newMessages })const aiMsg: ChatMessage = {role: 'assistant',content: res.answer}setMessages((prev) => [...prev, aiMsg])} catch (e: any) {setError(e?.message || '请求失败')} finally {setLoading(false)}},[client, messages, loading])return { messages, loading, error, send }
}

作业 3：`useStreamingChat` hook（基于 `streamChat`）

// useStreamingChat.ts
import { useState, useCallback, useRef } from 'react'
import type { AIClient, ChatMessage, ChatChunk } from './aiClient'interface UseStreamingChatOptions {client: AIClientinitialMessages?: ChatMessage[]
}export function useStreamingChat({client,initialMessages = []
}: UseStreamingChatOptions) {const [messages, setMessages] = useState<ChatMessage[]>(initialMessages)const [loading, setLoading] = useState(false)const [error, setError] = useState<string | null>(null)const abortRef = useRef<AbortController | null>(null)const send = useCallback(async (content: string) => {const text = content.trim()if (!text || loading) returnsetError(null)const userMsg: ChatMessage = { role: 'user', content: text }const baseMessages = [...messages, userMsg]setMessages(baseMessages)const aiMsgId = Symbol('aiMsg') // 本地标记let currentAI: ChatMessage = { role: 'assistant', content: '' }setMessages((prev) => [...prev, currentAI])setLoading(true)try {// 不使用 AbortController 控制 fetch 本身，因为 AsyncIterable 内部已封装for await (const chunk of client.streamChat({ messages: baseMessages })) {if (chunk.type === 'delta' && chunk.content) {currentAI = {...currentAI,content: currentAI.content + chunk.content}setMessages((prev) => {const next = [...prev]next[next.length - 1] = currentAIreturn next})} else if (chunk.type === 'error') {throw new Error(chunk.error || '流式错误')}}} catch (e: any) {setError(e?.message || '流式请求失败')} finally {setLoading(false)abortRef.current = null}},[client, messages, loading])return { messages, loading, error, send }
}