如何在vue项目中调用chatgpt的API接口

发布时间：2023-04-25 文章分类：WEB开发, 电脑百科投稿人：赵颖字号：默认 | 大 | 超大打印

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

在Vue项目中安装axios，使用以下命令进行安装：
```
npm install axios --save
```

在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;
  },
};

在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接口，并将返回的消息添加到页面中。

标签 api, AT, 项目