前端使用fetch请求streams api,使用read()处理返回的response时,为什么第一次会出现阻塞?

使用fetch请求streams api的,当请求开始响应的时候,使用read()将返回的流式数据转成可展示的数据,然后通过while循环重复以上过程达到流式展示的效果;
问题:
第一次使用read()解析返回数据的时候,会执行很长时间,阻塞了后续执行;之后会将请求每次返回的数据一次性处理执行;造成的实际页面效果是:页面会空白很长时间,然后突然把所有的数据展示出来了,失去了流式的效果;

        const response = await fetch(url, {
          method: 'POST',
          headers: {
            [Authorization]: getAuthorization(),
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(body),
        });

        const reader = response.body
          ?.pipeThrough(new TextDecoderStream())
          .pipeThrough(new EventSourceParserStream())
          .getReader();

        while (true) {
          // 第一次console时间
          console.log(new Date().getTime());
          const x = await reader?.read();
          // 第二次console时间
          console.log(new Date().getTime());
          if (x) {
            const { done, value } = x;
            console.log('value', value)
            try {
              // 处理展示streams数据 
            } catch (e) {
              console.warn(e);
            }
            if (done) {
              console.info('done');
              break;
            }
          }
        }

第一次和第二次时间打印之间间隔了几十s,是因为await reader?.read();语句导致的,但不知道什么原因导致的;
之后循环的每一次过程2此时间打印间隔都很小且都为流式数据正确的结果,从循环第二次开始到循环结束大概只有几十ms的时间;
造成的影响就是页面空白了几十s,然后所有的数据就突然展示出来,并不是每个字轮流出现的效果;

有没有大佬能帮忙,是因为第一次的read()执行将之后所有的返回数据都处理了并等待streams api达到done状态后才执行后面的内容造成了阻塞效果,还是因为其它原因。

同一个服务接口用在其它页面上是能展示正确的流式输出效果的;

阅读 1.5k
2 个回答

看不出有什么问题,会不会是你的接口并不是流式返回数据,而是攒够了一次性返回?如果使用 nginx,默认就是如此。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏