小白入门：前端前端调用 AI 接口全流程（附具体案例）

很多前端新手在调用 AI 接口时会犯怵：不知道 “怎么怎么传参数？”“流式响应怎么处理？”“不同功能（润色 / 扩写）调用方式不一样吗？”

其实很简单！本文以 “智能文本处理工具” 为例，手把手教你从 0 到 1 调用 AI 接口，包含润色、扩写等功能，看完就能上手。

准备工作：先看懂这 3 个核心文件

在开始前，我们需要明确项目中 3 个关键文件的作用（这些文件你可能已经有了，只是不知道怎么用）：

• vite.config.js：配置后端接口代理，解决跨域问题
• apiClient.js：封装好的 HTTP 请求工具，帮你发请求
• aiService.js：封装好的 AI 功能函数（润色 / 扩写等）

配置文件（vite.config.js）

这个文件告诉前端：" 调用 /writer_api 开头的接口时，自动转发到后端服务器 "。

// vite.config.js
export default defineConfig({
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
class HttpClient {
async post(url, data) {
return fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
}
}
export default new HttpClient();

AI 功能封装（aiService.js）

这里已经帮你写好了调用各种 AI 功能的函数，直接用就行！

// aiService.js
import apiClient from './apiClient.js';

// 润色功能
export const polishText = async (text, style) => {
return apiClient.post('/writer_api/generate/', {
writing_mode: `润色${style}`,
text: text
});
};

// 扩写功能
export const expandText = async (text) => {
return apiClient.post('/writer_api/generate/', {
writing_mode: '扩写',
text: text
});
};

// 处理流式响应（AI逐字返回结果时用）
export const readStreamResponse = async (response, onUpdate) => {
const reader = response.body.getReader();
const decoder = new TextDecoder();
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 class="ai-tool">
<!– 输入区域 –>
<textarea
v-model="userText"
placeholder="请输入需要处理的文本…"
></textarea>

<!– 功能按钮 –>
<div class="buttons">
<button @click="handlePolish">润色</button>
<button @click="handleExpand">扩写</button>
</div>

<!– 结果展示 –>
<div class="result">
<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 功能，步骤都是固定的：

常见问题解答

Q：为什么要处理流式响应？
A：AI 生成内容时是逐字返回的（比如 “你好→你好，→你好，我是→…”），流式处理能让用户实时看到结果，体验更好。

Q：想加翻译功能怎么办？
A：在 aiService.js 里加一个 translateText 函数，然后在页面加个按钮调用它，逻辑和扩写完全一样。

Q：后端接口地址变了怎么办？
A：只需要改 vite.config.js 里的 target 地址，不用改业务代码。

通过这个例子，你应该能明白：调用 AI 接口其实就是 “传参数→等结果→显示结果” 这三步。不管是润色、扩写还是其他功能，都是同样的套路，换个函数名就行～

如果还有疑问，欢迎在评论区留言！