怎么调用你的接口 请使用vue2示范一下
时间: 2024-06-09 16:09:58 浏览: 94
好的,以下是一个使用 Vue 2 调用 ChitGPT 的示例:
首先在 Vue 2 的组件中引入 axios,然后定义一个方法来调用 ChitGPT 的 API:
```javascript
<script>
import axios from 'axios';
export default {
data() {
return {
userInput: '',
botResponse: ''
}
},
methods: {
async sendMessage() {
const response = await axios.post('https://api.chitgpt.com/chat', {
message: this.userInput
});
this.botResponse = response.data.message;
}
}
}
</script>
```
在上面的代码中,我们使用 axios 发送一个 POST 请求到 ChitGPT 的 API,请求的参数是用户输入的消息,然后将 API 返回的消息赋值给 botResponse 属性,以便在界面上显示。
接下来,在组件的模板中添加一个输入框和一个按钮,用于用户输入和发送消息:
```html
<template>
<div>
<input v-model="userInput" type="text">
<button @click="sendMessage">Send</button>
<p>{{ botResponse }}</p>
</div>
</template>
```
这样就完成了一个简单的使用 Vue 2 调用 ChitGPT 的示例。
阅读全文