前端调用 AI 接口全流程及具体案例

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>
    <!-- 输入区域 -->
    <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 功能，步骤都是固定的：

1. 获取用户输入：从输入框拿到 userText
2. 调用对应函数：
   • 润色用 polishText(文本，风格)
   • 扩写用 expandText(文本)
3. 处理流式响应：用 readStreamResponse 实时显示结果
4. 错误处理：用 try/catch 捕获异常，提示用户

常见问题解答

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

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

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

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