Vue 与 OpenAI 接口交互实战：发送请求的全流程解析（一）

前言

本文讲解使用vue去搭建一个项目，然后向OpenAI发送请求，并获取数据

文章分为两篇书写，本篇文章侧重于书写API的封装与调用，第二篇文章侧重于页面逻辑的处理

接下来就让我们开始吧!

调用OpenAI的本质是什么？

本质是利用其提供的API,通过向OpenAI的服务器发送HTTP请求的方式来实现与其系统的交互和数据传输

调用OpenAI的步骤
1. 获取OpenAI提供的API密钥和URL
2. 构建HTTP请求的URL和请求体。请求体中包含您想要发送给OpenAI的数据
3. 发送HTTP请求到OpenAI的服务器
4. 接收OpenAI的响应数据,并对其进行解析和处理

通过以上调用步骤我们可以知道关键就在于构建请求体然后发送请求

那么我们要怎么去构建这个函数呢？

这里我们采用形参输入想要问的问题以及key的形式去构建一个函数

并通过fetch去模拟http请求向OpenAI发送请求，并获取交互数据

首先创建一个函数

export async function chat(messageList, apiKey)

在函数通过形参输入想要问的问题以及key，内部就可以直接使用这两个参数

const result = await fetch('https://api.xxxxxxxx/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                // 授权
                'Authorization': 'Bearer ' + apiKey,
            },
            body: JSON.stringify({
                model: 'gpt-3.5-turbo',
                messages: messageList,
            })
        })

向 OpenAI 的 Chat Completions 接口发送一个 POST 请求,并携带必要的参数和身份验证信息。通过使用 await 关键字,可以确保在后续处理响应数据之前,请求已经完成并返回了响应对象。

https://api.xxxxxxxx/v1/chat/completions为请求OpenAI的URL，需要自行获取

这里我使用的是国内的一个网站使用其转发服务向OpenAI发送请求，本文不做重点探讨，文章侧重于书写API的封装与调用

接下来就是调用函数返回数据了

export async function chat(messageList, apiKey) {
  // console.log('chat');
  try {
    const result = await fetch("https://api.xxxxxxxx/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
        // 授权
        Authorization: "Bearer " + apiKey,
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: messageList,
      }),
    });
    const data = await result.json();
    return data;
  } catch (err) {
    console.log(err);
    throw err;
  }
}

在这段代码中,使用了两个 await 关键字,它们分别起了不同的作用

第一个 await fetch(...):
- 这里使用 await 是为了等待 fetch() 函数执行完毕,并获取到 HTTP 响应对象。
- 如果不使用 await，fetch() 函数会立即返回一个 Promise 对象,而不是实际的响应数据。
- 使用 await 可以确保在下一步处理响应数据时,我们已经拥有了完整的响应对象。
第二个 await result.json():
- 这里使用 await 是为了等待响应数据被解析为 JSON 格式。
- result.json() 也是一个异步操作,会返回一个 Promise 对象。
- 使用 await 可以确保在下一步使用 data 变量时,我们已经拥有了解析完成的 JSON 数据。

两个 await 关键字都是为了处理异步操作,确保在下一步操作中,我们能够获取到所需的完整数据

这样我们就已经封装好了一个简单的GPT调用的函数了

现在我们进行测试一下效果如何

<script setup>
import { chat } from "./libs/gpt.js";

const main = async () => {
  const messageList = [{
    role: 'admin',
    content: '你是一位4s店销售专家，可以回答有关买车卖车的问题'
  },
  {
    role: 'user',
    content: '凯迪拉克方向盘是真的有问题吗？'
  }
  ]
  const data = await chat(messageList, 'sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
  console.log(data);
};
main();
</script>