像 ajax onprogress 一样获取流 html

如何解决像 ajax onprogress 一样获取流 html

是否可以对此进行简单的简单修改？

目标是在接收到 html 时“绘制”它。

可能的场景：一个需要 5 到 8 秒执行时间的 PHP，并在处理时推送每个回声。

常规 fetch.then 是 WAITING 所有行开始渲染。

我希望它在数据进入时尽快开始呈现。

我关闭了 Nginx 并关闭了输出缓冲区，这样当我在一个浏览器，我看到所有行都出现了，但 fetch 正在等待所有行。

这里是常规的 fetch.then（工作但等待）

// when I call this : it ask the PHP,PHP works,once PHP finished => boom => html render to a div ;)
function fetchajax (PHPurl,stuff1,divid) {
    var pcache = (Math.floor(Math.random() * 100000000) + 1); // random value to avoid cache reading
    var postix = []; // prepare array for post body
    postix["somestuff1"] = encodeURIComponent(stuff1); 
    postix["somestuff2"] = encodeURIComponent("test2");
    fetch(PHPurl+"?pcache="+pcache,{
      method: "POST",body: JSON.stringify(Object.assign({},postix)),// transforms the array to be sent as body for the post request
      headers: {"Content-type": "application/json; charset=UTF-8"}
    }).then(function (response) { return response.text(); })
    .then(function (html) { $("#"+divid).html(html); })
    .catch( err => console.log() );
}

在这里我找到了一些灵​​感https://jakearchibald.com/2016/streams-ftw/，但我不知道我可以从哪个响应、结果、阅读器中取出 html...

// I want this to STREAM or render as soon as data is received to a div
function fetchajax (PHPurl,divid) { 
    fetch("/templates/account_ajax/topnavisub/"+sub+".PHP?pcache="+pcache+"&fetchx="+pcache,headers: {"Content-type": "application/json; charset=UTF-8"}
    }).then(function(response) {
      var reader = response.body.getReader();
      var bytesReceived = 0;

      reader.read().then(function processResult(result) {
        if (result.done) { console.log("Fetch complete");return;}
        
        bytesReceived += result.value.length;console.log(response,result,reader);
        $("#"+divid+"_message").append('. ');

        return reader.read().then(processResult);
      });
    });
}

有了这个，我在处理 PHP 的过程中看到了点；) 但是如何在那里显示文本或响应正文？

你可以在那里看到这个例子https://jsbin.com/vuqasa/edit?js,console

解决方法

:) 我找到了答案

感谢这两个链接

https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream

Uint8Array to string in Javascript

这里是一个混合和测试

php 可以推送任何带有 CSS 和 javascript 的 html，只要它到达 YAY 就可以执行；)

对 php 的测试是 echo some html,echo '1',sleep(3) 并重复几次。

当我触发“fetchsrteam”函数时，我看到每个回声直播，我不必等待 php 完成。这样我就可以看到正在发生的事情的反馈（罕见但可能）从 API 检索信息、执行操作、计算等的长 php 脚本。

** 我也在 IOS 和 Android 的 webviews 中对此进行了测试；)

function fetchsrteam ( divid,sub,buttonid ) {
    
    var pcache = (Math.floor(Math.random() * 100000000) + 1); 
    var postix = [];
    postix["preventCache"] = pcache;
    postix["divid"] = encodeURIComponent(divid);
    postix["buttonid"] = encodeURIComponent(buttonid);
        
    fetch("/.........php?pcache="+pcache,{
      method: "POST",body: JSON.stringify(Object.assign({},postix)),headers: {"Content-type": "application/json; charset=UTF-8"}
    }).then(response => response.body)
      .then(rb => {
        const reader = rb.getReader();
          return new ReadableStream({
            start(controller) {
              function push() {
                reader.read().then( ({done,value}) => {
                  if (done) {
                    console.log('done',done); controller.close(); return;
                  }
                  controller.enqueue(value); $("#"+divid).append(new TextDecoder().decode(value)); push();
                })
              }
            push();
            }
          });
    });

}

这里的神奇之处在于这行 $("#"+divid).append(new TextDecoder().decode(value)); ==>> new TextDecoder().decode(value) 包裹在 $("#id").append(.....

玩得开心;)