在本篇技术文章中，咱们将运用运用Fetch API构建谈天界面的代码。该代码包括一个ChatInterface类，该类提供了与AI通讯的功用，以完成发送谈天、撤销谈天和获取谈天记录等功用。

功用截图

使用Fetch API构建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的交互成果。

结语

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