获取流 html 就像 ajax onprogress

Question

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

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

可能的情况：php需要 5 到 8 秒来执行，并在处理时推送每个回显。

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

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

我的 nginx 关闭了输出缓冲区，这样每个回显都会被推送到浏览器行（我不必等待 php 完成就可以开始看到回显...）我在浏览器中点击这个 php，我看到所有行都出现了，但是 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/ 但我不知道响应、结果中的哪一个 reader 我可以从中提取 html...

// I want this to STREAM or render as soon as data is received to a div
function fetchajax (phpurl,stuff1,divid) { 
    fetch("/templates/account_ajax/topnavisub/"+sub+".php?pcache="+pcache+"&fetchx="+pcache, {
      method: "POST",
      body: JSON.stringify(Object.assign({}, postix)),
      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

Answer 1

:) 我找到了答案

感谢这 2 个链接

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 完成。这样我就可以看到正在发生的事情的反馈（很少但可能）长 php 从 API 检索信息、执行操作、计算等的脚本

** 我还在 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().....

玩得开心;)

获取流 html 就像 ajax onprogress

fetch stream html like ajax onprogress

html

stream

fetch-api

fileoutputstream