在Vue项目中调用ChatGPT的API接口需要以下步骤:

  1. 在Vue项目中安装axios,使用以下命令进行安装:
    npm install axios --save

  2. 在Vue项目中创建一个API模块,用于封装与ChatGPT的API交互逻辑。可以在项目根目录下创建一个api目录,并在该目录下创建一个chatgpt.js文件,代码如下:
    import axios from 'axios';
    
    const API_URL = 'https://api.chatgpt.com';
    
    export default {
      async getResponse(message) {
        const response = await axios.post(`${API_URL}/api/chat`, { message });
        return response.data;
      },
    };

  3. 在Vue组件中引入API模块,并调用其中的方法:
    <template>
      <div>
        <input v-model="message" @keyup.enter="sendMessage" />
        <div v-for="(msg, index) in messages" :key="index">
          {{ msg }}
        </div>
      </div>
    </template>
    
    <script>
    import chatgptAPI from '@/api/chatgpt';
    
    export default {
      data() {
        return {
          message: '',
          messages: [],
        };
      },
      methods: {
        async sendMessage() {
          const response = await chatgptAPI.getResponse(this.message);
          this.messages.push(response.message);
          this.message = '';
        },
      },
    };
    </script>

    在上述代码中,我们在组件中引入了chatgptAPI模块,并在sendMessage方法中调用了该模块中的getResponse方法,将用户输入的消息发送到ChatGPT的API接口,并将返回的消息添加到页面中。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐