使用Fetch API构建AI聊天界面

在本篇技术文章中，我们将使用使用Fetch API构建聊天界面的代码。该代码包含一个ChatInterface类，该类提供了与AI通信的功能，以实现发送聊天、取消聊天和获取聊天记录等功能。

功能截图

完整项目地址可在 完整代码  中找到。

核心思想

这段代码的核心思想是通过使用Fetch API与后端API进行通信，实现聊天界面的各种功能。它包含了以下关键部分：

1. fetchData方法：这个方法用于执行Fetch请求，并返回一个Promise对象以处理异步操作。它发送GET和POST请求，并处理响应数据。通过使用这个方法，我们可以方便地发送请求和处理响应。
2. postWithStream方法：这个方法用于发送带有数据流的POST请求。它使用Fetch API发送POST请求，并处理响应数据流。通过这个方法，我们可以在请求过程中逐步处理响应数据，而不需要等待整个响应返回。
3. sendChat方法：这个方法用于发送聊天消息。它获取聊天界面中输入的频道ID和问题，并使用
4. cancelChat方法：这个方法用于取消聊天。它使用getRequest方法发送GET请求，向后端发送取消聊天的请求。通过这个方法，我们可以取消正在进行的聊天会话。
5. getChatHistory方法：这个方法用于获取聊天记录。它使用getRequest方法发送GET请求，向后端请求获取聊天记录。通过这个方法，我们可以获取之前的聊天记录。

核心代码解析

我们将重点关注以下几个核心部分：

postWithStream方法

postWithStream(url, body, onData) {
  // 使用 fetch 函数发送 POST 请求
  return fetch(url, {
    method: "POST", // 指定 HTTP 方法为 POST
    headers: {
      "Content-Type": "application/json", // 指定请求内容类型为 JSON
      "Custom-Header": "value", // 自定义请求头
    },
    body: JSON.stringify(body), // 将 body 参数转换为 JSON 字符串并作为请求体发送
  }).then((response) => {
    // 如果响应状态码不是 2xx，抛出异常
    if (!response.ok) {
      throw new Error("Network response was not ok.");
    }

    // 从响应中获取数据流读取器
    const reader = response.body?.getReader();
    const decoder = new TextDecoder();

    /**
     * 递归函数，逐个读取数据块并处理
     * @returns {Promise} - 返回一个 Promise 对象，用于处理异步操作
     */
    function read() {
      return reader?.read().then(({ done, value }) => {
        if (done) {
          return;
        }
        const text = decoder.decode(value);
        onData(text); // 调用回调函数
        return read();
      });
    }

    return read();
  });
}

这段代码实现了一个带有数据流的POST请求的方法。它使用Fetch API发送POST请求，将请求方法设置为POST，并将请求内容类型设置为JSON。请求体是通过将body参数转换为JSON字符串并作为请求体发送。

在获取到响应后，我们从响应中获取数据流读取器，通过递归函数read逐个读取数据块并进行处理。每次读取到数据块后，我们使用TextDecoder将数据块解码为文本，并调用传入的onData回调函数进行处理。

这个方法对于处理较大的响应数据流非常有用，可以逐步获取和处理数据，而不需要等待整个响应返回。

sendChat方法

sendChat() {
  var _this = this;
  var channelId = this.channelIdInput.value;
  var question = this.questionInput.value;

  var data = {
    channelId: channelId,
    chat: {
      questions: [
        {
          type: "user",
          content: question,
        },
      ],
    },
  };
  this.responseContainer.innerHTML = "";
  this.postWithStream(
    config.apiUrl + "/sendChat?apikey=" + config.apiKey,
    data,
    function (text) {
      _this.responseContainer.innerHTML += text;
    }
  );
}

这个方法用于发送聊天消息。它首先获取聊天界面中输入的频道ID和问题，然后构建一个包含这些数据的data对象。

在postWithStream方法的回调函数中，我们将获取到的文本追加到responseContainer元素中，实现了在界面上显示聊天的功能。

通过这个方法，可以发送聊天消息，并在界面上实时显示与AI的交互结果。

结语

以上是代码中比较核心的部分解读，完整项目地址可在 完整代码  中找到。