Fetch API

Fetch API 提供了用于获取资源(包括通过网络)的接口。fetch提供了request和response对象（以及网络请求所涉及的其他内容）的通用定义。(引用MDN)
使用fetch读取一个图片文件，添加到页面中
//index.html

<button id="btn">read</button>

<script>
  var readBtn = document.getElementById('btn');
        readBtn.onclick = async function(){
        var res = await fetch('image/test.png');
        console.log(res, '111');
        fetchFileBlob(res)
};
//异步读取文件
async function fetchFileBlob(file){
      var dataBlob = await file.blob();
      //把取到的二进制文件转换成可解析的URL
      var url = URL.createObjectURL(dataBlob);

    //初始化一个Image()实例
    var img = new Image();
          img.src = url;
     //把img实例添加到body体中
    document.getElementsByTagName('body')[0].appendChild(img)；
    console.log(dataBlob, '二进制内容')；
}
</scirpt>