Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

fetch API 对标准 Stream 的支持

  fetch API 很大的一个槽点就是不对 Stream 支持,然而最新的 Chrome 已经在 fetch API 上实现了 Stream 的支持。虽然奇葩的 JavaScript 上实现这样的处理需要各种转换,使用起来会有点乱。但我觉得这个发展方向是对的,这样下去 fetch API 才有点像样。
  下面我们使用 fetch API 来从服务器读入一个文档流(这里使用 nodejs 写服务器程序) // server.js
require('http').createServer(function(req, res) {
  res.writeHeader(200, {
    'Content-Type': 'text/html',
    'Access-Control-Allow-Origin': 'http://127.0.0.1'
  });
  // 每 100 毫秒输出一个 i,共 20 个
  void function callee(i) {
    if(i === 0) return res.end();
    res.write(i + '<hr/>');
    setTimeout(callee, 100, i - 1);
  }(20);
}).listen(3000);
  我本地的 80 端口已经给 Nginx 了,所以就不直接用 nodejs 搭静态服务器了。 <script>
fetch('http://127.0.0.1:3000').then(function(controller) {
  // 从 fetch 控制器的 body 属性得到一个 ReadableStream 实例
  // 从这个 ReadableStream  实例上取到其 reader 对象,并返回给 promise
  return controller.body.getReader();
}).then(function(reader) {
  void function callee(result) {
    // 将强类型数组的 value 转换成字符串,并输出到文档
    if(result.value) {
      var fr = new FileReader();
      fr.readAsText(new Blob([result.value]));
      fr.onload = function() {
        document.body.insertAdjacentHTML('beforeend', fr.result);
      };
    }
    if(result.done) {
      // 完成
      document.body.insertAdjacentHTML('beforeend', 'ok');
    } else {
      // 异步递归
      reader.read().then(callee);
    }
  }({ done: false });
});
</script>
  这个测试在最新的 Chrome 上能跑,所以今后 fetch API 会逆袭也说不定呢,坐等!
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^