Fetch 简单使用

最新推荐文章于 2023-08-29 17:17:59 发布

rufeike

最新推荐文章于 2023-08-29 17:17:59 发布

阅读量204

点赞数

分类专栏：笔记文章标签： js javascript

本文链接：https://blog.csdn.net/rufeike/article/details/103720373

版权

笔记专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章目录

Fetch 简单使用

Fetch 简单使用

Fetch可以替代XMLHttpRequest实现异步请求

学习参考：简书使用 Fetch

fetch请求示例

请求JSON文件

fetch('http://example.com/movies.json')
    .then(function(response){
        return response.json();
    })
    .then(function(myjson){
        console.log(myjson);
    });

请求txt文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = ()=>{
            let btn = document.getElementById('btn');
            btn.onclick = async ()=>{//同步声明
                let res = await fetch('./1.txt');//返回一个promise对象
                let content = await res.text();//获取二进制数据
                console.log(content);
            }
        }

    </script>
</head>
<body>
    <input type="button" value="ajax请求测试" id="btn">
</body>

</html>

请求图片或视频文件

注意：一般请求视频大文件不使用该方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = ()=>{
            let btn = document.getElementById('btn');
            let img = document.getElementById('img');
            btn.onclick = async ()=>{//同步声明
                let res = await fetch('./images/1.jpg');//返回一个promise对象
                let blob = await res.blob();//获取二进制数据
                let url = URL.createObjectURL(blob);//转换成临时地址
                img.src = url;
            }
        }

    </script>
</head>
<body>
    <input type="button" value="ajax请求测试" id="btn">
    <img src="" alt="" id="img">
</body>

</html>

rufeike

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Fetch 简单使用

文章目录Fetch 简单使用学习参考：[简书使用 Fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)fetch请求示例请求JSON文件请求txt文件请求图片或视频文件Fetch 简单使用Fetch可以替代XMLHttpRequest实现异步请求学习参考：简书使用 Fetchfetc...
复制链接

扫一扫