XHR 和 fetch 功能对比

功能点	XHR	Fetch
基本的请求能力	✅	✅
基本的获取响应能力	✅	✅
监控请求进度	✅	❌
监控响应进度	✅	✅
Service Worker 中是否可用	❌	✅
控制 cookie 的携带	❌	✅
控制重定向	❌	✅
请求取消	✅	✅
自定义 referrer	❌	✅
流	❌	✅
API 风格	Event	Promise
活跃度	停止更新	不断更新

提问

1. fetch可以实现上传进度条吗？ 为什么？

不可以，因为fetch的API分格是Promise,Promise 只有成功和失败两种状态，所有他没有办法实现实时上传进度条。

2. chatgpt打字消息是用那个请求实现的，实现原理

是用fetch实现的，因为fetch支持流式读取，而XHR不支持

async function loadData() {
  const resp = await fetch(url); 
  const reader = resp.body.getReader();
  const decoder = new TextDecoder('utf-8');
  while (1) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    const text = decoder.decode(value);
  }
}
loadData()