vue实现类GhatGPT逐字输出效果

最近有一个需求调用openAi 接口，因为返回内容是一次性返回， 避免用户等待时间长。
后端采用流式传输（stream）拿到一个字就传输一个字 。前端需要渲染文本实现打字效果

代码如下

 async getStream2() {
      try {
        let response = await  fetch('/cloud-ai/openai/stream?message=xxx');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const reader = response.body.getReader();
        const textDecoder = new TextDecoder();
        let result = true;
        let output = ''
        while (result) {
          const { done, value } = await reader.read();
          if (done) {
            console.log('Stream ended');
            result = false;
            break;
          }
          const chunkText = textDecoder.decode(value);
          output += chunkText;
          this.innerText+=chunkText
          console.log('Received chunk:', chunkText);
        }
      } catch (e) {
        console.log(e);
      }
    },

注意：在浏览器端，axios 是使用 XMLHttpRequest 对象来实现请求，设置 responseType: ‘stream’ 后会出现以下警告⚠️：The provided value ‘stream’ is not a valid enum value of type XMLHttpRequestResponseType.所以，在浏览器端，我们需要使用浏览器内置API fetch 来实现 stream 流式请求。