为什么招聘高级前端开发这么难？

import { fetchEventSource } from '@microsoft/fetch-event-source'; async function startStream() { await fetchEventSource('request url', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_TOKEN', }, body: JSON.stringify({ query: "Hello" }), onopen(response) { // 连接成功时触发 if (response.ok) return; throw new Error('连接失败'); }, onmessage(event) { // 接收服务器发送的每条事件 console.log('收到数据:', event.data); // 请求完成 console.log('请求结束标记', data.done) }, onclose() { // 连接关闭时触发 console.log('连接终止'); }, onerror(err) { // 错误处理（默认会抛出异常并自动重试） console.error('错误:', err); throw err; // 抛出错误会触发重试机制 } }); }

import { Injectable } from '@angular/core'; import { fetchEventSource } from '@microsoft/fetch-event-source'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class ChatService { streamGptResponse(prompt: string): Observable<string> { return new Observable(observer => { let fullResponse = ''; const ctrl = new AbortController(); fetchEventSource('request url', { method: 'POST', headers: { 'Content-Type': 'application/json', // 告诉服务器，客户端数据格式 'Accept': 'text/event-stream' // 客户端声明:希望接收事件流格式的响应 }, body: JSON.stringify({ prompt }), signal: ctrl.signal, onmessage(event) { // 处理每个数据块 try { const data = JSON.parse(event.data); // data可以根据后端返回的具体格式，进行相应的处理 if (data.content) { fullResponse += data.content; observer.next(fullResponse); } // 标记请求完成 if (data.done) { observer.complete(); } } catch (error) { console.error('Parse message failed:', error); } }, onopen(response) { if (response.ok && response.headers.get('content-type')?.includes('text/event-stream')) { console.log('Connection opened'); } else { throw new Error(`Failed to open connection: ${response.status}`); } }, onclose() { console.log('Connection closed'); observer.complete(); }, onerror(error) { console.error('Connection error:', error); observer.error(error); ctrl.abort(); } }); // 返回清理函数 return () => { ctrl.abort(); }; }); } }

import { Component } from '@angular/core'; import { SseService } from '../../services/sse.service'; @Component({ selector: 'app-gpt-stream', template: ` <div class="gpt-stream-container"> <div class="input-area"> <textarea [(ngModel)]="prompt" placeholder="请输入..." ></textarea> <button (click)="generateResponse()" [disabled]="isGenerating" > 发送 </button> </div> <div class="response-area"> <markdown *ngIf="response" [data]="response"></markdown> <div *ngIf="isGenerating" class="loading"> 思考中... </div> </div> </div> `, styles: [` .gpt-stream-container { padding: 20px; } .input-area { margin-bottom: 20px; } textarea { width: 100%; min-height: 100px; padding: 10px; margin-bottom: 10px; } .response-area { padding: 15px; border: 1px solid #eee; border-radius: 4px; min-height: 100px; } .loading { color: #666; font-style: italic; } `] }) export class GptStreamComponent { prompt = ''; response = ''; isGenerating = false; constructor(private sseService: SseService) {} generateResponse() { if (!this.prompt.trim() || this.isGenerating) { return; } this.isGenerating = true; this.response = ''; this.sseService.streamGptResponse(this.prompt) .subscribe({ next: (chunk) => { this.response = chunk; }, error: (error) => { console.error('Stream error:', error); this.isGenerating = false; }, complete: () => { this.isGenerating = false; } }); } }

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { MarkdownModule } from 'ngx-markdown'; import { GptStreamComponent } from './components/gpt-stream/gpt-stream.component'; import { SseService } from './services/sse.service'; @NgModule({ declarations: [ GptStreamComponent ], imports: [ CommonModule, FormsModule, MarkdownModule.forRoot() ], exports: [ GptStreamComponent ], providers: [ SseService ] }) export class SharedModule { }