前端调用 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.(data)
    });
  }
}
   ();