网络-fetch

于 2023-10-02 07:23:04 发布
阅读量469 收藏 2
点赞数
分类专栏： 网络 文章标签： 网络 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smznbhh/article/details/133478890
版权

文章目录

前言

本文主要记录浏览器与服务端网络通讯 fetch 的介绍与使用，将完成get、post、进度、取消请求、和超时请求的功能实现。

一、fetch简介

fetch作为继XMLHttpRequest的网络通讯手段，在使用方面极大的简化了使用方法，通过直观的语义化调用方式让代码更具有可读性，但是它对于一些复杂问题确实有待提高，也有一些实验性的更新还在尝试，如获取请求进度、设置超时时间、中断请求等，他自身都不能完成，需要借助外界的力量。

优点：

  • 简洁易用：Fetch API提供了一种简洁的方式来发送网络请求，使用起来非常直观和易于理解。它使用了Promise和链式调用的方式，使得代码更加清晰和可读。
  • 强大灵活：Fetch API支持发送不同类型的请求，如GET、POST、PUT、DELETE等，可以满足各种不同的需求。它还支持设置请求头、发送FormData、上传文件等功能，提供了更多的灵活性和功能性。
  • 支持异步编程：Fetch API基于Promise，可以使用异步编程的方式处理请求和响应。这使得我们可以更好地处理异步操作，避免回调地狱和复杂的嵌套结构。
  • 内置的错误处理：Fetch API内置了错误处理机制，可以通过.catch()方法捕获和处理请求过程中的错误。这使得我们可以更好地处理网络请求中可能出现的问题，提高了代码的健壮性和可靠性。
  • 跨域请求支持：Fetch API支持跨域请求，可以发送跨域请求并处理响应。这对于开发跨域应用或与不同域的API进行通信非常有用。

缺点：

  • 兼容性问题：Fetch API在一些旧版本的浏览器中可能不被完全支持。特别是在IE浏览器中，需要使用Polyfill或者其他库来提供兼容性支持。
  • 不支持取消请求：Fetch API目前不支持取消请求的功能。一旦请求被发送出去，就无法中止或取消。这可能会导致一些问题，特别是在需要处理大量请求或需要及时取消请求的情况下。
  • 不支持超时设置：Fetch API也不支持设置请求的超时时间。如果需要在一定时间内没有响应时取消请求，需要使用其他方式来实现，如使用AbortController和AbortSignal。
  • 无法直接获取请求进度：Fetch API没有提供直接获取请求进度的功能。如果需要获取请求的进度信息，如上传或下载的进度，需要使用其他方式来实现，如使用XMLHttpRequest或其他库。
  • 缺乏一些高级功能：相比于一些第三方库，Fetch API在一些高级功能方面可能有所欠缺。例如，它没有提供自动的请求重试、请求拦截、请求缓存等功能，需要自行实现或使用其他库来满足需求。

二、使用

不用像XMLHttpreques,需要先构造一个XMLHttpreques对象。fetch直接可以使用，就直接 fetch() 使用就行，可以传递；两个参数，参数二在get请求时可不传，fetch默认发送get请求。

  • 参数1：url 请求地址
  • 参数2：对象，对象包括请求方式、头部、请求体
 {
                method:'post',
                headers:{
                    'Content-Type':'application/json'
                },
                body: JSON.stringify({
                    name:'smz'
                })
            }

fetch在第一个then返回的是一个promise ===> fetch的response对象,并不是结果，在这个对象里面包括了请求状态、信息、方法等。在这里需要设置一下返回数据的格式，这个一般和后端沟通好。对请求做处理大都是在这里进行的。

response对象

response

返回格式：

  • text():将响应体解析为纯文本字符串并返回
  • json()：将响应体解析为JSON格式并返回一个JS对象
  • blob()：将响应体解析为二进制数据并返回一个Blob对象
  • arrayBuffer()：将响应体解析为二进制数据并返回一个ArrayBuffer对象
  • formData()：将响应体解析为FormData对象

在第二个then中，才是返回的数据，当然，可以通过链式调用catch来处理请求中发生的错误。
下面就进入使用吧。

get

get请求时，第二个参数可不传，默认就是get请求，当然你需要添加请求头之类的可以传第二个参数，这里需要注意的是第一个then里面需要指定返回数据的格式，上面已经给出了几种格式。遇到跨域问题可以看我这个文章 跨域解决 给出了几个跨域的解决方案。

 fetch('http://localhost:3000/api/txt').then(response=>{
            console.log(response)
            //指定返回的格式
            return response.text()
        }).then(data=>{
            console.log(data)
        }).catch(error => {
            // 处理错误
            console.error(error);
        });

post

post请求只要将第二个参数中method属性改为post,headers属性是设置请求头的，body是请求体也就是带的数据。

fetch('http://localhost:3000/api/txt',
            {
                 method:'post',
                 headers:{
                     'Content-Type':'application/json'
                 },
                 body: JSON.stringify({
                     name:'smz'
                 }),
            }
        ).then(response=>{
            console.log(response)
            //指定返回的格式
            return res.json()
        }).then(data=>{
            console.log(data)
        }).catch(error => {
            // 处理错误
            console.error(error);
        });

进度实现

在fetch中没有像 XMLHttpReques 中 progress事件的loaded和total属性用来监听请求的进度，所以这个功能只能自己实现。实现思路大致如下：

  • 在第一个then中利用response.body.getReader()返回一个流
// 返回一个流
const reader = response.body.getReader()
  • 利用response.headers.get('Content-Length')获取资源总长度
// 响应头上有总长度信息
const total = response.headers.get('Content-Length')
  • 循环流分片，利用reader.read()得到请求信息，计算当前进度，并传递给元素

每个分片利用reader.read()会得到done和value，done表示是否完成，value表示当前长度。

let loaded = 0
            while (true){
                const {done,value} = await reader.read()
                if (done){
                    break
                }
                loaded += value.length// 当前进度
                console.log(loaded)
                const progress = document.getElementById('progress')
                progress.innerHTML = `${(loaded/total*100).toFixed(2)+ '%'}`
            }

这里需要注意因为response被getReader()占用了，所以需要提前拷贝一份response，返回用拷贝的response

const res = response.clone()// 拷贝一份，因为被getReader()占用
return res.text()

完整代码：

fetch('http://localhost:3000/api/txt').then(async response=>{
            console.log(response)
            const res = response.clone()// 拷贝一份，因为被getReader()占用
            // 返回一个流
            const reader = response.body.getReader()
            // 响应头上有总长度信息
            const total = response.headers.get('Content-Length')
            let loaded = 0
            while (true){
                const {done,value} = await reader.read()
                if (done){
                    break
                }
                loaded += value.length// 当前进度
                console.log(loaded)
                const progress = document.getElementById('progress')
                progress.innerHTML = `${(loaded/total*100).toFixed(2)+ '%'}`
            }
            //指定返回的格式
            return res.text()
        }).then(data=>{
            console.log(data)
        }).catch(error => {
            // 处理错误
            console.error(error);
        });

进度条

取消请求

同样在fetch中是无法通过它内部API实现请求的中断的，需要借助AbortController和AbortSignal对象来实现请求中断。

  • 创建了一个AbortController对象
    在请求外部创建AbortController对象
 const controller = new AbortController();
  • 通过controller.signal获取对应的AbortSignal对象。
const signal = controller.signal
  • 将AbortSignal对象作为Fetch请求的signal选项传递给fetch函数
fetch('http://localhost:3000/api/txt',
            {
                signal // AbortSignal对象
            }
        )
  • 调用controller.abort()方法，触发AbortSignal对象的abort事件，终止Fetch请求
 stop.addEventListener('click',()=>{
        // 终止请求
        controller.abort();
    })
  • 在请求被终止后，进入catch块，进行错误处理。
    需要注意的是，终止请求后，Fetch请求的Promise会被拒绝，并且会抛出一个AbortError错误。因此，在处理错误时，可以通过判断错误类型为AbortError来区分是否是请求被终止的情况。
catch(error => {
            // 处理错误
            if (error.name === 'AbortError'){// 中断请求
                alert('请求被终止')
            }else {
                console.error(error);
            }
        });

使用AbortController和AbortSignal可以灵活地控制和终止Fetch请求，特别适用于需要及时取消请求的场景，如用户取消操作或超时处理。

中止请求

超时实现

fetch也是不能设置超时时间的。

先定义一个自定义错误，用来标识超时错误

class TimeoutError extends Error {
        constructor(message = '请求超时') {
            super(message)
            this.name = 'TimeoutError'
        }
    }

超时有两种办法：

  1. 使用setTimeout和AbortController实现
    在指定的时间内调用请求终止 controller.abort();
function fetchWithTimeout(url, timeout) {
        return new Promise((resolve, reject) => {
            // 创建一个AbortController对象
            const controller = new AbortController();
            const signal = controller.signal;
            // 设置超时定时器
            const timeoutId = setTimeout(() => {
                // 终止请求
                controller.abort();
                reject(new TimeoutError();
            }, timeout);
            fetch(url, { signal })
                .then(response => {
                    clearTimeout(timeoutId); // 清除超时定时器
                    resolve(response);
                })
                .catch(error => {
                    clearTimeout(timeoutId); // 清除超时定时器
                    reject(error);
                });
        });
    }
  1. 使用setTimeout和Promise.race方法实现
    定义好一个超时promise对象，利用Promise.race()方法返回 超时promise和请求promise对象第一个完成的状态。
    function fetchWithTimeout2(url, timeout) {
        const fetchPromise = fetch(url);
        const timeoutPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                // 终止请求
                controller.abort();
                reject(new TimeoutError());
            }, timeout);
        });
// 使用Promise.race方法，同时等待fetchPromise和timeoutPromise
        return Promise.race([fetchPromise, timeoutPromise]);
    }

两种方式使用就和fetch使用方式一样。

// fetchWithTimeout('http://localhost:3000/api/txt', 3000)
        fetchWithTimeout2('http://localhost:3000/api/txt', 3000)
            .then(response => response.text())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                if (error.name === 'TimeoutError'){
                    alert('请求超时，请重试')
                }else {
                    console.error(error);
                }
            });

方式二这里只能将超时实现，并不能将请求杀死，请求还会继续进行，直到后端处理了该请求

超时

完整代码：

 // 超时设置
    // 自定义错误
    class TimeoutError extends Error {
        constructor(message = '请求超时') {
            super(message)
            this.name = 'TimeoutError'
        }
    }
    // 方案一
    function fetchWithTimeout(url, timeout) {
        return new Promise((resolve, reject) => {
            // 创建一个AbortController对象
            const controller = new AbortController();
            const signal = controller.signal;

            // 设置超时定时器
            const timeoutId = setTimeout(() => {
                // 请求中断
                controller.abort();
                reject(new TimeoutError());
            }, timeout);
            fetch(url, { signal })
                .then(response => {
                    clearTimeout(timeoutId); // 清除超时定时器
                    resolve(response);
                })
                .catch(error => {
                    clearTimeout(timeoutId); // 清除超时定时器
                    reject(error);
                });
        });
    }

    // 方案二
    function fetchWithTimeout2(url, timeout) {
        const fetchPromise = fetch(url);
        const timeoutPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                // 超时
                reject(new TimeoutError());
            }, timeout);
        });
// 使用Promise.race方法，同时等待fetchPromise和timeoutPromise
        return Promise.race([fetchPromise, timeoutPromise]);
    }
    const overtime = ()=>{
        // fetchWithTimeout('http://localhost:3000/api/txt', 300)
        fetchWithTimeout2('http://localhost:3000/api/txt', 300)
            .then(response => response.text())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                if (error.name === 'TimeoutError'){
                    alert('请求超时，请重试')
                }else {
                    console.error(error);
                }
            });
    }

总结

fetch请求目前来说处理简单请求，日后等fetch API完善吧。其他复杂的请求还是使用ajax来完成，而且还有axios对ajax做了封装。这里值得一提的是XMLHttpReques已经不再更新了。

天将降大任于我
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Fetch 概述
ruguo_happy的博客
03-04 420
Fetch Api 概述 XMLHttpRequest的问题 所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码 采用传统的事件驱动模式，无法适配新的 Promise Api Fetch Api 的特点 并非取代 AJAX，而是对 AJAX 传统 API 的改进 精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景 使用 Prom...
前端进阶Vue框架-----fetch库(get和post)
m0_61656944的博客
02-17 457
get : post:
Fetch简介
lihaoen666的博客
10-18 339
GET请求 实例 var result = fetch('/api/1', { credentials: 'include', //这里是设置跨域请求可以带cookie headers: { 'Accept': 'application/json, text/plain, */*' } }); POST请求 实例 //...
前端开源库-fetch-js
08-29
前端开源库-fetch-js获取JS，可靠地获取脚本，并在评估后执行回调
Fetch API 简介
邱凯翔 Edward 的个人博客
08-19 583
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and fle...
node-fetch-image:从网络获取图像
06-22
从网络获取图像。 例子 给我取1000张凯蒂佩里的照片到katyp-pics文件夹并将它们命名为katyp-0.jpg , katyp-1.png ... bin/fim ' katy perry ' -d katyp-pics -n 1000 -p ' katyp- ' 给我 1000 个 Katy Perry 的...
react-native-fetch-mock:拿出react-native的模拟
05-02
没有fetch模拟可以轻松地用于react-native。 因此，我自己创建一个。 要求 Nodejs> = 12.x 路线图 与Mock.js结合 支持排除其他途径 其他API服务器的代理 全局和特定路径的延迟 支持灵活回退到网络（ ） 支持...
JavaScript - Fetch用法教程
06-10
Fetch虽然 是还是一个实验性的功能，但是已经被很多前端开发人员所熟知...它还提供了一个全局 fetch()方法，该方法提供了一种简单，合乎逻辑的方式来跨网络异步获取资源。本课程就让我们来一步一步领略Fetch的魅力吧。
react-native-fetch-library:简单的二次封装react native的fetch网络请求，支持设置单个网络请求的timeout网络超时时间，同时可取消fetch请求
05-02
react-native-fetch-library 简单的二次封装react native的fetch网络请求，支持设置单个网络请求的timeout网络超时时间，同时可取消fetch请求。 中断fetch请求方案思路：每个组件都绑定有pageId，所有的fetchPromise...
intro-to-fetch
03-16
从网络上获取数据 了解并履行承诺 将我们抓取的数据添加到DOM 从网络获取数据 在我们的javascript文件中，我们可以运行内置的fetch存方法来从任何URL抓取数据。 今天，我们将使用下面演示的网址： fetch ( ...
fetch API 简介
SalmonellaVaccine的专栏
07-03 471
http://bubkoo.com/2015/05/08/introduction-to-fetch/ 十多年来，我们一直使用 XMLHttpRequest（XHR）来发送异步请求，XHR 很实用，但并不是一个设计优良的 API，在设计上并不符合职责分离原则，输入、输出以及状态都杂糅在同一对象中，并用事件机制来跟踪状态变化。并且，基于事件的模型与最近流行的 Promise 和 gener
前端基础建设与架构17 学习 axios：封装一个结构清晰的 Fetch 库
fegus的博客
09-14 882
本讲我们在开篇分析了代码设计、代码分层的方方面面，一个好的设计一定是层次明晰，各司其职的，一个好的设计也会直接帮助业务开发提升效率。封装和设计，是编程领域亘古不变的经典话题，需要每名开发者下沉到业务开发中体会、思考。本小节的后半部分，我们从源码入手，分析了 axios 的优秀设计思想。即便你在业务中没有使用过 axios，但对于 axios 的学习始终是必要且重要的。主要内容总结如下：最后，给大家布置一个思考题：axios 支持请求取消能力，这是如何实现的呢？欢迎在留言区和我分享你的观点。
Fetch()
weixin_34238642的博客
11-21 844
Fetch()提供了一种方式进行跨网络异步请求资源的方式，用于访问和操作HTTP管道的部分，比如：请求和相应。 fetch常见的坑： 接收到表示错误的HTTP状态码时，fetch()返回的Promise不会被标记为reject（即使状态码为404或500）。fetch()会将Promise状态标记为resolve（但resolve返回...
前端进阶Vue框架-----fetch库-get练习案例
m0_61656944的博客
02-17 96
<script src="/lib/vue.js"></script> <style> li{ overflow: hidden; list-style: none; padding: 10px; } li img{ float: left; width: 100px; ...
fetch详细讲解
@必意玲
07-28 2459
使用 fetch 可以方便地向服务器发送请求，并将响应返回给客户端。你可以使用 fetch 获取文本、JSON、图像和文件等数据，并进行各种处理。fetch 还支持流式传输和取消请求等高级功能，使得处理大型数据集和长时间运行的操作变得更加简单和可靠。fetch API 也是 Javascript 中常用的 API 之一，它提供了一组方法和属性，可以在浏览器端与服务器进行通信。通过 fetch API，你可以轻松地使用 fetch 协议进行数据传输，并对请求和响应进行操作和处理。
HTTP 请求库Fetch vs Axios
allway2的博客
02-17 814
在我们之前的文章“如何使用 Axios 发出 HTTP 请求”中，我们已经解释了如何使用 Axios 发送基本的 CRUD 请求。使用 Axios 的主要好处之一是发送请求时自动进行 JSON 字符串化。本机Fetch API不支持的功能。 我们的帖子得出结论，Axios 是一个轻量级库，在处理 HTTP 请求时提供了许多有用的功能。例如，Axios 提供了一种通过其请求配置来跟踪上传进度的简单方法。此外，Axios 允许您定义拦截器以轻松地自动执行请求的特定任务。 不过，让我们也看看 Fetch AP
Fetch超时设置和终止请求
u013594477的专栏
12-10 2478
1.基本使用 Fetch 是一个新的端获取资源的接口，用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念，与后端语言请求资源更接近。 一个简单的GET请求 fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 .then(resp=>console.log(resp)) // 输出请求内容 .
fetch简介: 新一代Ajax API
weixin_34199335的博客
05-24 352
AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好。更好用的API是 fetch 。下面简单介绍 window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。 XML...
fetch详解
热门推荐
宁静致远
08-17 1万+
在 JS 中使用 fetch 更加高效地进行网络请求 在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。 我的源博客地址：http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/ 免费的高质量软件开发视频教程 https://devopen.clu
node-fetch
最新发布
10-16
node-fetch 是一个基于 Promise 的轻量级 HTTP 客户端，用于在 Node.js 环境中进行网络请求。它支持所有的 HTTP 方法，包括 GET、POST、PUT、DELETE 等，并且可以设置请求头、请求体等参数。使用 node-fetch 可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天将降大任于我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值