vue2使用fetch-event-source接收并显示示例

在Vue2中使用`fetch`配合`EventSource`（Server-Sent Events）接收和显示流式文本是一个常见的实践，特别是在需要实现实时更新的情况下。下面是一个简单的示例：

首先，在组件里安装`axios`（用于`fetch`）和`vue-eventsource`插件，它们可以帮助简化`EventSource`的使用：

npm install axios vue-eventsource

然后在`.vue`文件中引入并设置：

<template>
  <div id="stream-view">
    <p v-if="message">{{ message }}</p>
    <!-- ...其他内容... -->
  </div>
</template>

<script>
import axios from 'axios';
import { eventSource } from 'vue-eventsource';

export default {
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    const es = eventSource('your-server-url', { /* 可选配置 */ });
    es.on('data', (event) => {
      this.message = event.data;
      // 如果你想实时渲染，可以用v-html或innerHTML
      // 这里仅为了简单展示，所以只是替换文字
      this.$refs.streamView.innerText = this.message;
    });
    es.on('error', (err) => {
      console.error('Error occurred:', err);
    });
    es.onclose(() => {
      console.log('Connection closed');
    });
  },
  beforeDestroy() {
    es.close(); // 关闭连接，防止内存泄漏
  },
};
</script>

在这个例子中，我们监听`'data'`事件来获取从服务器传来的流式文本，将其存储在`this.message`中，然后更新视图。如果遇到错误或连接关闭，相应的处理函数会被触发。

请注意，你需要将 `'your-server-url'` 替换为你实际的服务器地址，该地址应该提供一个支持 SSE 的接口。