一、问题与目标AI 生图在纹渊里不是一个孤立按钮。它的结果会继续进入纹样预览、3D 贴图、收藏、导出和分享。如果 HTTP 请求只写在页面点击事件里后续任何一个异常都会直接污染页面状态。Service 封装的目标是把不稳定的网络能力变成稳定的业务结果。页面只提交提示词、风格和载体信息Service 负责 URL 归一化、请求体组装、超时控制、错误分类和结果转换。这样失败时能显示明确原因成功时也能统一回填到创作状态。二、实现思路请求前先做参数收敛空提示词不发请求风格标签转成稳定枚举图片尺寸和返回格式使用默认值兜底。请求中要控制超时和取消避免用户连续点击时多个请求互相覆盖。请求后统一输出 ImageResult不把接口原始字段直接暴露给页面。错误也要分类。网络超时、鉴权失败、服务限流、返回格式异常、图片下载失败对用户来说含义不同。页面只显示“生成失败”太粗糙至少要区分可重试、需修改输入、稍后再试这几类反馈。Service 边界处理方式输入校验提示词、风格、尺寸和载体信息先归一化请求封装统一 URL、Header、超时和取消逻辑结果转换把接口返回转成 ImageResult供 Canvas 和 3D 链路复用错误分类区分超时、限流、鉴权和格式异常给出不同提示三、关键实现HTTP Service 的入口保持简单接收密钥和提示词返回 ImageResult。复杂的 URL 处理、请求体组装和错误转换都包在函数内部。async function requestImage(apiKey: string, prompt: string): PromiseImageResult { const url normalizeImageApiUrl(this.apiUrl) const request http.createHttp() try { const response await request.request(url, { method: http.RequestMethod.POST, header: { Content-Type: application/json, Authorization: Bearer ${apiKey} }, extraData: JSON.stringify(buildImageBody(prompt)), expectDataType: http.HttpDataType.STRING }) return parseImageResult(response.responseCode, String(response.result)) } finally { request.destroy() } }这个封装让页面不用知道第三方接口字段。后续更换模型服务、增加备用接口或接入本地缓存时只需要调整 Service创作页仍然消费同一个 ImageResult。连续点击是必须处理的场景。新的生成请求发出后旧请求即使返回也不应该覆盖当前结果。可以通过 requestId、AbortController 或状态版本号保证最后一次操作才有资格更新页面。四、失败场景与取舍AI 生图失败不能只写日志。用户需要知道下一步是修改提示词、检查网络还是稍后重试。对于限流和服务异常可以保留上一次成功结果对于输入为空或格式错误应直接在页面阻止请求。另一个取舍是不要把外部服务结果直接写死到 UI。图片 URL、临时文件、缩略图和原图应该在 Service 层转换清楚页面只关心当前有没有可展示、可保存、可贴图的结果。五、验证步骤打开创作入口确认标题、主要卡片、底部操作区和预览区域显示正常。走一遍主流程观察加载态、成功态和下一步按钮是否同步变化。人为制造空输入、重复点击或不可用条件确认页面给出可理解的提示。返回上一页再进入确认选中态、预览结果和关键状态没有漂移。在较窄窗口和较宽窗口各看一遍确认文字、卡片和按钮没有重叠。六、总结AI 生图 HTTP Service 的价值在于把不可控的外部请求变成可解释、可降级的业务状态。请求、结果和错误都经过统一封装后Canvas、3D 和导出链路才能稳定复用。