小白入门：前端前端调用 AI 接口全流程（附具体案例）
很多前端新手在调用 AI 接口时会犯怵：不知道 “怎么怎么传参数？”“流式响应怎么处理？”“不同功能（润色 / 扩写）调用方式不一样吗？”
其实很简单！本文以 “智能文本处理工具” 为例，手把手教你从 0 到 1 调用 AI 接口，包含润色、扩写等功能，看完就能上手。
准备工作：先看懂这 3 个核心文件
在开始前，我们需要明确项目中 3 个关键文件的作用（这些文件你可能已经有了，只是不知道怎么用）：
- vite.config.js：配置后端接口代理，解决跨域问题
- apiClient.js：封装好的 HTTP 请求工具，帮你发请求
- aiService.js：封装好的 AI 功能函数（润色 / 扩写等）
配置文件（vite.config.js）
这个文件告诉前端：" 调用 /writer_api 开头的接口时，自动转发到后端服务器 "。
// vite.config.js exportdefaultdefineConfig({ server:{ proxy:{// AI功能接口代理（润色/扩写等） '/writer_api':{ target:'http://192.168.0.1:3000',// 后端服务器地址 changeOrigin:true,// 解决跨域 rewrite:path=> path.replace(/^\/writer_api/,'')// 去掉前缀 }}}});请求工具（apiClient.js）
这个文件封装了发送请求的逻辑，你不用关心 fetch 或 axios 的细节，直接调用即可。
// apiClient.js classHttpClient{asyncpost(url, data){returnfetch(url,{ method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)});}}exportdefaultnewHttpClient();AI 功能封装（aiService.js）
这里已经帮你写好了调用各种 AI 功能的函数，直接用就行！
// aiService.js import apiClient from'./apiClient.js';// 润色功能 exportconstpolishText=async(text, style)=>{return apiClient.post('/writer_api/generate/',{ writing_mode:`润色${style}`, text: text });};// 扩写功能 exportconstexpandText=async(text)=>{return apiClient.post('/writer_api/generate/',{ writing_mode:'扩写', text: text });};// 处理流式响应（AI逐字返回结果时用） exportconstreadStreamResponse=async(response, onUpdate)=>{const reader = response.body.getReader();const decoder =newTextDecoder();let result ='';while(true){const{ done, value }=await reader.read();if(done)break; result += decoder.decode(value);onUpdate(result);// 实时更新结果 }return result;};实战案例：做一个 AI 文本处理工具
我们来做一个简单的页面，包含：
- 输入框（用户输入文本）
- 功能按钮（润色 / 扩写）
- 结果展示区（显示 AI 处理后的内容）
页面结构（Vue 组件为例）
先写好 HTML 结构，让用户能输入文本、选择功能、看到结果。
<template> <div> <!-- 输入区域 --> <textarea v-model="userText" placeholder="请输入需要处理的文本..." ></textarea> <!-- 功能按钮 --> <div> <button @click="handlePolish">润色</button> <button @click="handleExpand">扩写</button> </div> <!-- 结果展示 --> <div> <h3>处理结果：</h3> <p>{{ resultText }}</p> </div> </div> </template> 核心逻辑：调用 AI 接口
重点看 JavaScript 部分，这是调用接口的核心代码。
<script setup> import { ref } from 'vue'; // 导入AI功能函数 import { polishText, expandText, readStreamResponse } from './aiService.js'; // 定义变量 const userText = ref(''); // 用户输入的文本 const resultText = ref(''); // AI返回的结果 // 1. 调用润色功能 const handlePolish = async () => { // 先检查用户有没有输入内容 if (!userText.value) { alert('请输入文本！'); return; } try { // 调用润色接口，传入文本和风格（这里固定用"更正式"） const response = await polishText(userText.value, '更正式'); // 处理AI的流式响应（实时更新结果） await readStreamResponse(response, (partialResult) => { resultText.value = partialResult; // 实时显示到页面 }); } catch (error) { alert('润色失败，请重试！'); console.error(error); } }; // 2. 调用扩写功能（和润色几乎一样） const handleExpand = async () => { if (!userText.value) { alert('请输入文本！'); return; } try { // 调用扩写接口，只需要传入文本 const response = await expandText(userText.value); // 同样用流式响应处理结果 await readStreamResponse(response, (partialResult) => { resultText.value = partialResult; }); } catch (error) { alert('扩写失败，请重试！'); } }; </script> 样式美化（可选）
加一点 CSS 让页面好看点：
<style scoped> .ai-tool { max-width: 800px; margin: 20px auto; padding: 20px; } textarea { width: 100%; height: 150px; padding: 10px; margin-bottom: 10px; } .buttons { margin-bottom: 20px; } button { margin-right: 10px; padding: 8px 16px; cursor: pointer; } .result { padding: 10px; border: 1px solid #eee; } </style> 关键步骤总结
不管调用哪种 AI 功能，步骤都是固定的：
- 获取用户输入：从输入框拿到
userText - 调用对应函数：
- 润色用
polishText(文本, 风格) - 扩写用
expandText(文本)
- 润色用
- 处理流式响应：用
readStreamResponse实时显示结果 - 错误处理：用
try/catch捕获异常，提示用户
常见问题解答
Q：为什么要处理流式响应？
A：AI 生成内容时是逐字返回的（比如 “你好→你好，→你好，我是→…”），流式处理能让用户实时看到结果，体验更好。
Q：想加翻译功能怎么办？
A：在 aiService.js 里加一个 translateText 函数，然后在页面加个按钮调用它，逻辑和扩写完全一样。
Q：后端接口地址变了怎么办？
A：只需要改 vite.config.js 里的 target 地址，不用改业务代码。
通过这个例子，你应该能明白：调用 AI 接口其实就是 “传参数→等结果→显示结果” 这三步。不管是润色、扩写还是其他功能，都是同样的套路，换个函数名就行～
如果还有疑问，欢迎在评论区留言！
