js数据交互——fetch

 

什么是fetch？

Fetch被称为下一代Ajax技术,采用Promise方式来处理数据。
是一种简洁明了的API，比XMLHttpRequest更加简单易用。
fetch是原生的(无需引入任何库和框架)。

fetch跟ajax的区别：

页面中需要向服务器请求数据时，基本上都会使用Ajax来实现。
Ajax的本质是使用XMLHttpRequest对象来请求数据，而XMLHttpRequest对象是通过事件的模式来实现返回数据的处理。
与XMLHttpRequest类似，Fetch允许你发出AJAX请求。
区别在于Fetch API使用Promise方式，Promise是已经正式发布的ES6的内容之一，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。

 

1.使用fetch解析文本数据：

fetch_txt.html代码如下：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        let oBtn = document.getElementById('btn1');
        oBtn.onclick = async function(){
            // 1.请求
            let res = await fetch('1.txt');
            // 2.解析
            let str = await res.text();

            console.log(str);
        }
    }
    </script>
</head>
<body>
    <input type="button" value="读取" id="btn1"  />
</body>
1.txt代码如下：

what are you doing 

comedy

 click button效果如下:

   

 

2.使用fetch解析json数据

fetch_json.html代码如下:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        let oBtn = document.getElementById('btn1');
        oBtn.onclick = async function(){
            // 1.请求;
            let res = await fetch('1.json');
            // 2.解析
            let str = await res.json();

            console.log(str);
        };
    };
    </script>
</head>
<body>
    <input type="button" value="读取" id="btn1"  />
</body>
1.json代码如下:
{"name":"comedy","who":"yourdaddy","age":"18"}

click button效果如下:

 

3.使用fetch解析图片（解析二进制数据）

fetch_imgdata.html代码如下：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        let oImg = document.getElementById('img');
        let oBtn = document.getElementById('btn1');
        oBtn.onclick = async function(){
            // 1.请求
            let res = await fetch('timg.jpg');
            // 2.解析
            let imgdata = await res.blob();
            console.log(imgdata);
            //把二进制数据转换能能够解析的url
            let imgurl = URL.createObjectURL(imgdata);
            oImg.src=imgurl;
            console.log(imgurl);
        };
    };
    </script>
</head>
<body>
    <input type="button" value="读取" id="btn1"  />
    <img id="img" />
</body>

运行效果如下：

 

 

end 

posted @ 2019-10-31 19:28  Comedyy  阅读(916)  评论(0)    收藏  举报