现在公司的AI部门的前端面试这么离谱吗？-CSDN博客

本文链接：https://blog.csdn.net/jennycisp/article/details/148099244

前言

笔者刷某平台看到一个前端面经，发现大厂 Ai部门的前端面试有点离谱的存在了，从前端追问到transform…

具体面经图片

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

transform在本文就不讨论了，这个图解非常生动形象。笔者因为是在公司做LLM前端应用的，本文先围绕 SSE落地的方案做解答，后续还会更新。

后续已更新面经解析2： fetch的类库源码解析

LLM前端应用技术选型

工程开发：
- 服务端：主要负责持续接收相关内容，并将其发送至前端。
- 前端：则持续接收来自服务端的内容，并进行渲染展示。
持续性接收的实现方案：

内容呈现为一段一段地输出文本，在 HTTP 范式下，存在两种常见方案，即 Server - Sent Events（服务器发送事件）和 Websocket。

SSE接入的具体落地有几种方案

1. EventSource 实现接入

EventSource 是一个 Web API，是浏览器提供的原生对象，专门用于处理 SSE。使用简单，对 SSE 协议有良好的支持，自动处理连接的保持、重连等机制。

EventSource 基于 HTTP 协议实现，通过与服务器建立一个持续连接，实现了服务器向客户端推送事件数据的功能。

在客户端，EventSource 对象通过一个 URL 发起与服务器的连接。连接成功后，服务器可以向客户端发送事件数据。在客户端，通过 EventSource 对象注册事件处理函数，以接收来自服务器的事件数据。

js 体验AI代码助手 代码解读复制代码const eventSource = new EventSource('http://localhost:3000');

eventSource.addEventListener('message', (event) => {
  console.log('收到消息:', event.data);
  document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;
});

eventSource.onopen = () => console.log('连接已打开');
eventSource.onerror = () => {
  console.error('连接中断，将自动重连');
};

EventSource API 是用于服务器发送事件（SSE）的客户端接口。它不支持发起 POST 请求。如果需要发送数据到服务器以便它能够推送事件给客户端，应该使用标准的 AJAX 请求（例如使用 Fetch API、XMLHttpRequest API）或者WebSocket。

2. XMLHttpRequest 实现接入

虽然 XMLHttpRequest 对象通常用于发送 HTTP 请求并接收响应，但它并不是专门设计用来处理 Server-Sent Events (SSE) 的。SSE 是一种基于 HTTP 的实时推送技术，可以使用 XMLHttpRequest 来模拟 SSE 的行为。

js 体验AI代码助手 代码解读复制代码function startSSE() {
  // 创建 XMLHttpRequest 对象
  const xhr = new XMLHttpRequest();

  // 配置请求
  xhr.open('POST', 'http://localhost:3000/sse', true);
  xhr.setRequestHeader('Content-Type', 'application/json');

  // 发送请求数据（可以发送一些初始数据）
  const requestData = { clientId: '12345', message: 'Hello, server!' };
  xhr.send(JSON.stringify(requestData));

  // 监听服务器推送的数据
  xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.LOADING) {
      // 处理流式数据
      const responseText = xhr.responseText;
      const messages = responseText.split('\n\n'); // SSE 数据以两个换行符分隔
      messages.forEach((message) => {
        if (message.startsWith('data:')) {
          const data = message.slice(5).trim(); // 去掉 "data:" 前缀
          console.log('Received:', data);
        }
      });
    }
  };

  // 监听错误
  xhr.onerror = () => {
    console.error('Error occurred during SSE connection');
  };

  // 监听连接关闭
  xhr.onloadend = () => {
    console.log('SSE connection closed');
  };
}

// 启动 SSE
startSSE();

3. Fetch 实现接入

Fetch与XMLHttpRequest实现同理，来模拟 SSE 的行为。

下面是简单的demo：

js 体验AI代码助手 代码解读复制代码async function downloadFile() {
    try {
        const response = await fetch('https://example.com/large-file');
        const reader = response.body.getReader();
        let receivedLength = 0;
        const totalLength = response.headers.get('content - length');

        while (true) {
            const { done, value } = await reader.read();
            if (done) {
                break;
            }
            receivedLength += value.length;
            const progress = (receivedLength / totalLength * 100).toFixed(2);
            console.log(`Download progress: ${progress}%`);
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

最终方案

由于需要进行post请求，而没有基于XMLHttpRequest封装的类库，于是使用基于fetch封装的类库，微软开源的 @microsoft/fetch-event-source请求库，该库基于fetch进行了封装。在此基础上，我对其进行了二次封装，主要目的是增强请求的可控性，并提升错误处理的健壮性。具体封装功能如下：

请求取消机制：实现了对请求的主动取消功能，确保在需要时能够及时中断请求，避免不必要的资源消耗。
错误捕获与处理：对各类错误进行了统一的捕获与处理，涵盖以下场景：
- 网络错误：当网络连接异常或请求无法发送时，捕获并处理相关错误。
- 服务器错误：针对服务器返回的5xx或4xx状态码进行错误处理。
- 网络连接错误：在网络连接中断或请求超时时，进行相应的错误捕获。
- 流式接口超时错误：在请求流式数据的过程中，若出现超时情况，能够及时捕获并处理。
- JSON解析错误：对返回的数据进行JSON解析时，若解析失败，能够捕获并处理异常。

通过上述封装，显著提升了请求的可靠性与稳定性，确保在各种异常情况下能够进行有效的错误处理与恢复。

安装：

cmd

 体验AI代码助手
 代码解读
复制代码npm i --save @lesliechueng/stream-fetch-manage

使用示例：

ts 体验AI代码助手 代码解读复制代码import { StreamFetchClient } from '@lesliechueng/stream-fetch-manage'

const streamFetchApp = new StreamFetchClient(
  {
    baseUrl: "",
    headers: {
      "Content-Type": "application/json",
    },
    overErrorTimer: 60 * 1000, // 流式中间超时时间，单位为毫秒
  },
  {
    onMessage: (_data) => {
      // 处理流式消息
    },
    onClose: (_lastData: any) => {
      // 处理关闭时的回调
    },
    onServerError: (_lastData: any) => {
      // 处理服务器错误时的回调
    },
    onStreamConnectionError: (_lastData: any) => {
      // 处理流式中间超时错误时的回调
    },
    onConnectionError: (_lastData: any) => {
      // 处理连接错误时的回调
    },
    onParseError: (_lastData: any) => {
      // 处理 JSON解析错误时的回调
    },
  }
);
// 开始发起请求，下面是具体的参数
streamFetchApp.sendStreamRequest({
  // 流式中间请求参数
});

// 暂停请求
// streamFetchApp.disconnect();

解决网络抖动问题：通过在请求中设置缓存时间和 data个数。

ts 体验AI代码助手 代码解读复制代码import { StreamFetchClient } from '@lesliechueng/stream-fetch-manage'

const streamFetchApp1 = new StreamFetchClient(
  {
    baseUrl: "",
    headers: {
      "Content-Type": "application/json",
    },
    overErrorTimer: 60 * 1000, // 流式中间超时时间，单位为毫秒
  },
  {
    onMessage: (_data) => {
      // 调用消息处理器处理消息
      console.log(_data);
    },
    onClose: () => {
      // 处理关闭时的回调
    },
    onServerError: () => {
      // 处理服务器错误时的回调
    },
    onStreamConnectionError: () => {
      // 处理流式中间超时错误时的回调
    },
    onConnectionError: () => {
      // 处理连接错误时的回调
    },
    onParseError: () => {
      // 处理 JSON解析错误时的回调
    },
  },
  {
    maxCacheSize: 6, // 最大缓存大小，单位为条
    cacheTimeout: 5000, // 缓存超时时间，单位为毫秒
    expectedSeq: 0, // 期望的消息索引值
    handleValidateMessageFormat: (data: any) => {
      // 校验消息格式的回调
      if (typeof data.seq !== "number") {
        throw new Error("Message must have a numeric seq field");
      }
    },
    getIndexValue: (data: any) => data.seq, // 使得消息处理器获取消息索引值
  }
);

// 开始发起请求，下面是具体的参数
streamFetchApp1.sendStreamRequest({
  // 流式中间请求参数
});

r") {
throw new Error(“Message must have a numeric seq field”);
}
},
getIndexValue: (data: any) => data.seq, // 使得消息处理器获取消息索引值
}
);

// 开始发起请求，下面是具体的参数
streamFetchApp1.sendStreamRequest({
// 流式中间请求参数
});


源码：[github.com/leslieCHUEN…](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FleslieCHUENGT%2FstreamFetchManage)

今天贴心为大家准备好了一系列AI大模型资源，包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

有需要的小伙伴，可以点击下方链接免费领取【`保证100%免费`】

> [点击领取 《AI大模型&人工智能&入门进阶学习资源包》](https://mp.weixin.qq.com/s/sAGuCgAOUgS48zT1EHglKg)*

### [](https://blog.csdn.net/weixin_49895216/article/details/141475883?ops_request_misc=&request_id=&biz_id=102&utm_term=%E9%87%91%E8%9E%8D%E5%A4%A7%E6%A8%A1%E5%9E%8B%E9%9D%A2%E4%B8%B4%E5%93%AA%E4%BA%9B%E9%9A%BE%E7%82%B9%EF%BC%9F&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-141475883.142^v102^pc_search_result_base7&spm=1018.2226.3001.4187)内容包括：项目实战、面试招聘、源码解析、学习路线。

![img](https://i-blog.csdnimg.cn/img_convert/9324bdad06a94eb0ed202e04ecc8d383.png)

![img](https://i-blog.csdnimg.cn/img_convert/df23865822e1b083ce097ef51c6240de.png)![img](https://i-blog.csdnimg.cn/img_convert/4967ab8cae8c75c302ca4d3c3db47159.png)![img](https://i-blog.csdnimg.cn/img_convert/e6cec40d49a7240a0d193f235df0da49.png)![img](https://i-blog.csdnimg.cn/img_convert/33a9c91664bd3c9407a7276a3aeda0e1.png)
 **如果大家想领取完整的学习路线及大模型学习资料包，可以扫下方二维码获取**
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/43bd4129a4b34f27bbb956898737b970.png#pic_center)
**👉2.大模型配套视频👈**

很多朋友都不喜欢晦涩的文字，我也为大家准备了视频教程，每个章节都是当前板块的精华浓缩。(篇幅有限，仅展示部分）

![img](https://i-blog.csdnimg.cn/img_convert/1698d2fcd95ef3a03dc6f50fd5a36743.webp?x-oss-process=image/format,png)

大模型教程

**👉3.大模型经典学习电子书👈**

随着人工智能技术的飞速发展，AI大模型已经成为了当今科技领域的一大热点。这些大型预训练模型，如GPT-3、BERT、XLNet等，以其强大的语言理解和生成能力，正在改变我们对人工智能的认识。 那以下这些PDF籍就是非常不错的学习资源。（篇幅有限，仅展示部分，公众号内领取）

![img](https://i-blog.csdnimg.cn/img_convert/a49ec2aa99c80fcf23efc96ce1a7518c.webp?x-oss-process=image/format,png)

电子书

**👉4.大模型面试题&答案👈**

截至目前大模型已经超过200个，在大模型纵横的时代，不仅大模型技术越来越卷，就连大模型相关的岗位和面试也开始越来越卷了。为了让大家更容易上车大模型算法赛道，我总结了大模型常考的面试题。（篇幅有限，仅展示部分，公众号内领取）

![img](https://i-blog.csdnimg.cn/direct/7520c542c2c84c7cb4e8f13cc1da1255.png)

大模型面试

**因篇幅有限，仅展示部分资料，**有需要的小伙伴，可以点击下方链接免费领取【`保证100%免费`】

> [点击领取 《AI大模型&人工智能&入门进阶学习资源包》](https://mp.weixin.qq.com/s/sAGuCgAOUgS48zT1EHglKg)

**或扫描下方二维码领取 **

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2a048d665cc5410db66732aad49c1d24.png#pic_center)