概述
Fetch是一种网络通信协议，用于在客户端和服务器之间传输数据。该协议使用HTTP请求和响应进行通信，与传统的AJAX方式相比，Fetch更加简单易用，并提供了许多现代化的功能。
使用Fetch可以方便地向服务器发送请求，并将响应返回给客户端。你可以使用Fetch获取文本、JSON、图像和文件等数据，并进行各种处理。Fetch还支持流式传输和取消请求等高级功能，使得处理大型数据集和长时间运行的操作变得更加简单和可靠。
Fetch API也是Javascript中常用的API之一，它提供了一组方法和属性，可以在浏览器端与服务器进行通信。通过Fetch API，你可以轻松地使用Fetch协议进行数据传输，并对请求和响应进行操作和处理。
fetch 对比 xhr
fetch 和 XMLHttpRequest（XHR）都是前端与服务器进行数据交互的常用方式，它们各有优缺点，下面是它们的比较：
- API 设计和使用方式
fetch 的 API 设计更加现代化、简洁和易于使用，使用起来更加直观和方便。相比之下，XHR 的 API 设计比较繁琐，需要进行多个参数的配置和回调函数的处理。
- 支持的请求方法
fetch API 默认只支持 GET 和 POST 请求方法，而 XHR 则支持所有标准的 HTTP 请求方法。
- 请求头部
在 fetch 中设置请求头部的方式更加清晰和直接，可以通过 Headers 对象进行设置，而 XHR 的方式相对较为繁琐。
- 请求体
在发送 POST 请求时，fetch API 要求将请求体数据作为参数传递给 fetch 方法中的 options 对象，而 XHR 可以直接在 send() 方法中设置请求体数据。
- 支持的数据类型
在解析响应数据时，fetch API 提供了多种方法，包括 .json(), .blob(), .arrayBuffer() 等，而 XHR 只支持文本和二进制数据两种数据类型。
- 跨域请求
在进行跨域请求时，fetch API 提供了一种简单而强大的解决方案——使用 CORS（跨域资源共享）头部实现跨域请求，而 XHR 则使用了一个叫做 XMLHttpRequest Level 2 的规范，在代码编写上相对较为繁琐。
总的来说，fetch API 与 XHR 各有优缺点，具体选择哪种方式还需要根据具体情况进行考虑。平时开发中使用较多的是 fetch ，因为它使用方便、API 简洁、语法清晰，同时也支持了大多数常用的功能，可以有效地简化前端开发流程。
fetch 发送请求
fetch 返回格式
- text(): 将响应体解析为纯文本字符串并返回。
- json(): 将响应体解析为JSON格式并返回一个JavaScript对象。
- blob(): 将响应体解析为二进制数据并返回一个Blob对象。
- arrayBuffer(): 将响应体解析为二进制数据并返回一个ArrayBuffer对象。
- formData(): 将响应体解析为FormData对象。
1.get请求
fetch('http://localhost:3000/api/txt').then(res => { console.log(res); return res.text() }).then(res => { console.log(res); })
2.post请求
fetch('http://localhost:3000/api/post',{ method:'POST', headers:{ 'Content-Type':'application/json' }, body:JSON.stringify({ name:'zhangsan', age:18 }) }).then(res => { console.log(res); return res.json() }).then(res => { console.log(res); })
3.中断请求
使用 AbortController 的 abort方法中断
const abort = new AbortController() fetch('http://localhost:3000/api/post',{ method:'POST', headers:{ 'Content-Type':'application/json' }, signal:abort.signal, body:JSON.stringify({ name:'zhangsan', age:18 }) }).then(res => { console.log(res); return res.json() }).then(res => { console.log(res); }) document.querySelector('#stop').addEventListener('click', () => { console.log('stop'); abort.abort() })
4.获取进度
使用data.clone()方法复制了响应对象data，然后使用getReader()方法获取数据流中的reader对象，接着通过读取数据流并计算已加载字节数，实现了一个基于原生JavaScript的进度条功能。
const btn = document.querySelector('#send') const sendFetch = async () => { const data = await fetch('http://localhost:3000/api/txt',{ signal:abort.signal }) //fetch 实现进度条 const response = data.clone() const reader = data.body.getReader() const contentLength = data.headers.get('Content-Length') let loaded = 0 while (true) { const { done, value } = await reader.read() if (done) { break } loaded += value?.length || 0; const progress = document.querySelector('#progress') progress.innerHTML = (loaded / contentLength * 100).toFixed(2) + '%' } const text = await response.text() console.log(text); } btn.addEventListener('click', sendFetch)
