网络-fetch

已于 2024-07-12 09:33:10 修改
阅读量628 收藏 4
点赞数
分类专栏： 网络 文章标签： 网络 前端
于 2023-10-02 07:23:04 首次发布
版权声明：本文为博主原创文章，遵循 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);
                }
            });
    }

请求重试

利用递归和 Promise 失败回调完成 请求自定义次数重试

/**
 * 发出请求，返回Promise
 * @param url 请求地址
 * @param maxCount 最大重试次数
 */
function request(url, maxCount = 5) {
    return fetch(url).catch(err=>
    maxCount<=0?
    Promise.reject(err): // 重试次数耗尽后在Promise失败回调中返回err
        request(url,maxCount- 1) //重试次数还有则重新调用请求方法，并将重试次数减一
    )
}

// 使用
request('https://asdfas.asdfa3432sdf.com/tod')
.then((resp)=>{
    console.log(resp)
})
.catch((err)=>{
    console.log(err)
})

可重试请求

总结

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

天将降大任于我
关注
专栏目录
isomorphic-fetch
03-10
isomorphic-fetch-master这个压缩包文件很可能是项目源码的克隆或下载，其中可能包含以下组成部分： 1. **src** 文件夹：通常包含项目的源代码，分为不同模块，每个模块负责处理特定的fetch请求逻辑。 2. **dist** ...
前端进阶Vue框架-----fetch库(get和post)
m0_61656944的博客
02-17 489
get : post:
Fetch 概述
ruguo_happy的博客
03-04 445
Fetch Api 概述 XMLHttpRequest的问题 所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码 采用传统的事件驱动模式，无法适配新的 Promise Api Fetch Api 的特点 并非取代 AJAX，而是对 AJAX 传统 API 的改进 精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景 使用 Prom...
Fetch 的基本使用
最新发布
qq_73220073的博客
08-14 919
fetch(请求地址,配置项) --> 返回一个 promise 实例 --> const p = fetch(请求地址,配置项)
Fetch入门
前端学习博客
10-17 8189
Body.blob()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 Blob 格式（二进制格式，包含二进制数据信息）的 Promise 对象。Body.text()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 USVString 格式（文本格式）的 Promise 对象。
fetch详细讲解
@必意玲
07-28 9142
使用 fetch 可以方便地向服务器发送请求，并将响应返回给客户端。你可以使用 fetch 获取文本、JSON、图像和文件等数据，并进行各种处理。fetch 还支持流式传输和取消请求等高级功能，使得处理大型数据集和长时间运行的操作变得更加简单和可靠。fetch API 也是 Javascript 中常用的 API 之一，它提供了一组方法和属性，可以在浏览器端与服务器进行通信。通过 fetch API，你可以轻松地使用 fetch 协议进行数据传输，并对请求和响应进行操作和处理。
fetch的概念以及基本用法
咖啡壶的博客
03-04 1万+
fetch的概念以及基本用法
两小时入门 fetch
黑马程序员官方博客
07-19 458
原生fetch虽然已经支持 promise 了，相比 XMLHttpRequest 已然好用了很多，但是参数还是需要自己处理，比较麻烦。通过数据流（Stream对象）处理数据，可以分块读取，有利于提高网站性能，对于大文件或者网速慢的场景极为有用。采用了模块化设计，API分散于多个对象中（如：Response对象、Request对象、Header对象）Response 对象根据服务器返回的不同类型的数据，提供了不同的读取方法。，此外还可以接收第二个参数，作为配置对象，可以自定义发出的HTTP请求。
Fetch API
weixin_56132330的博客
03-07 300
学习笔记
electron-main-fetch在Electron的主要进程中使用浏览器FetchAPI
08-09
在压缩包`sindresorhus-electron-main-fetch-7524271`中，可能包含了`electron-main-fetch`库的源代码、文档、示例或者其他相关资源。如果你需要使用这个库，可以解压该文件，查看README或其他文档以获取详细的安装...
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服务器的代理 全局和特定路径的延迟 支持灵活回退到网络（ ） 支持...
sw-fetch
02-24
压缩包文件"sw-fetch-gh-pages"很可能包含了项目的文档、示例代码或部署到GitHub Pages的源代码。通过查看这些内容，开发者可以获得更详细的使用指南、API参考和示例用法，以便更好地在自己的项目中集成和使用sw-...
接口调用-fetch用法
Mint周的文章
10-23 378
3.1 fetch 概述 1.基本特性 ·更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版 ·基于Promise实现 官方网址（点击） 基本用法 // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据 <script type="text/javascript"> /* Fetch API 基本用法 */ fetch('http://localhost:3000/fd.
fetch请求理解和用法
Rain022111的博客
02-23 4237
接着我们调用Promise原型上的公有方法then(), then方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调函数resolve，（resolve函数的参数就是Response 对象，所以要明白then方法中的res其实就是Response），第二个参数是 Promise 执行失败时的回调函数reject，两个函数只会有一个被调用。：fetch()发起请求以后，只有网络错误，或者无法连接时，fetch()才会报错，其他情况都认为请求成功。如果以后有需要补充的会继续回来写的。
fetch在移动端的兼容性问题
neoveee的博客
12-27 3260
前段时间在做移动端H5应用开发过程中，遇到一个奇怪的问题：同样的页面，在IOS比较新的版本上可以正常加载，但是在IOS 10.2.1 上却一直 loading，加载不出来。借助调试工具发现，是在发送 HTTP 请求的过程中报错了，Unhanled promise rejection ,具体的错误截图当时忘记保存了。 刚开始怀疑是IOS 版本的问题，但是同样版本上，其他的H5页面可以正常加载。 然后...
Fetch使用方法
热门推荐
hsany330的专栏
06-11 2万+
前言： 　　fetch是用来取代传统的XMLHttpRequest的。它的优点很多，包括链式调用的语法、返回promise等。 什么是fetch? 　　fetch api是基于promise的设计，它是为了取代传统xhr的不合理的写法而生的。 WHY fetch？ 　　xhr请求写起来非常的混乱，如下所示： var xhr = new XMLHttpRequest(...
深入了解JavaScript中的fetch方法
前端卷王小白的博客
05-21 1万+
fetch方法,网络请求,跨域问题解决,超值请求,错误请求
前端基础建设与架构17 学习 axios：封装一个结构清晰的 Fetch 库
fegus的博客
09-14 929
本讲我们在开篇分析了代码设计、代码分层的方方面面，一个好的设计一定是层次明晰，各司其职的，一个好的设计也会直接帮助业务开发提升效率。封装和设计，是编程领域亘古不变的经典话题，需要每名开发者下沉到业务开发中体会、思考。本小节的后半部分，我们从源码入手，分析了 axios 的优秀设计思想。即便你在业务中没有使用过 axios，但对于 axios 的学习始终是必要且重要的。主要内容总结如下：最后，给大家布置一个思考题：axios 支持请求取消能力，这是如何实现的呢？欢迎在留言区和我分享你的观点。
node-fetch
10-16
node-fetch 是一个基于 Promise 的轻量级 HTTP 客户端，用于在 Node.js 环境中进行网络请求。它支持所有的 HTTP 方法，包括 GET、POST、PUT、DELETE 等，并且可以设置请求头、请求体等参数。使用 node-fetch 可以方便地进行 API 调用、爬虫等操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

天将降大任于我

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

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

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

打赏作者

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

抵扣说明：

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

余额充值