vue 无限请求xhr-streaming

Vue.js中的“无限请求xhr-streaming”通常是指在处理大量数据分页加载或者实时流式数据场景下，使用长轮询（Long Polling）或服务器推送（Server-Sent Events, SSE）技术，让前端可以持续不断地从服务器接收更新，而无需频繁地发起新的HTTP请求。

在 Vue 中，这可以通过以下步骤实现：

1. **设置事件监听器**：Vue 的 `axios` 或者其他 HTTP 客户端库，比如 `vue-resource`，需要配置成支持 streaming。例如使用 axios 的 `onUploadProgress` 和 `onDownloadProgress`。

axios.create({
  onUploadProgress: function(progressEvent) {
    // 更新进度条或显示加载状态
  },
  responseType: 'stream', // 设置响应体类型为流
})

2. **实现无限请求**：当用户滚动到页面底部或达到某个触发点时，你可以启动一个长时间运行的请求（如 Long Polling），直到接收到新数据或超时为止。

function fetchNewData() {
  axios.get('/api/data', { stream: true })
    .then(response => response.data)
    .on('data', chunk => handleNewData(chunk))
    .catch(error => handleError(error));
}

// 触发无限加载逻辑
scrollToBottom() {
  if (!isRequestRunning) {
    isRequestRunning = true;
    fetchNewData();
  }
}

3. **处理接收到的数据**：每次接收到数据块（chunk），就在前端更新视图，处理新数据。

function handleNewData(chunk) {
  processChunk(chunk);
  // 如果有更多数据，继续请求
  if (response.headers['content-length'] && response.body.byteLength > response.headers['content-length']) {
    setTimeout(fetchNewData, 500); // 超时后再发起请求
  } else {
    isRequestRunning = false; // 数据结束，停止请求
  }
}