这个是我看B站up主小满zs后整理的笔记fetch全套_哔哩哔哩_bilibili
fetch对比xhr
相同点：fetch和xhr都是前端与服务器进行数据交互的方式。
不同点：
- fetch的请求方式简单。
- fetch设置请求头部的时候更加简单使用
headers，对比xhr是setRequestHeader - fetch支持get和post方法，对比
xhr支持所有http的请求方法。 - fetch设置post请求体的时候，需要把请求数据传递给fetch方法的options对象，但是
xhr可以直接在send()方法。
nodejs提供接口
具体express的解析可以看我的ajax请求这篇文章一篇文章看懂Ajax基本使用-CSDN博客
import express from 'express'
// const fs=require('fs')
import fs from 'fs'
const app = express()
app.use(express.json())
import cors from 'cors'
app.use(cors({
origin: '*',//允许所有源
methods: 'GET,POST,PUT,DELETE,HEAD,PATCH',
allowedHeaders: ['Content-Type', 'Authorization']
}))
// post请求
app.post('/api/post', (req, res) => {
console.log(req.body)
res.json({
code: 200
})
})
// get请求,读取文件
app.get('/api/txt', (req, res) => {
const data = fs.readFileSync('./mytext.txt', 'utf8')
res.send(data)
})
app.listen(3001, () => {
console.log('listen open')
})
一个基本的fetch请求
const sendfetch = () => {
fetch('<http://localhost:3001/api/txt>',{
method:'get',
signal:abort.signal
}).then(async res => {
return res.text()
}).then(data => {
console.log(data)
})
请求中断 promise变成reject状态
const abort=new AbortController()
abort.abort()
//需要再请求options中配置 signal:abort.signal
const sendfetch = () => {
fetch('<http://localhost:3001/api/txt>',{
signal:abort.signal
}).then(async res => {
return res.text()
}).then(data => {
console.log(data)
})
}
设置请求超时，fetch本身没有这个方法，所以我们就需要去通过定时函数+中断
const timer=()=>{
setTimeout(() => {
abort.abort()
}, 1000);
}
//这里是返回响应体的数据格式
text() 将响应体解析为纯文本字符串并返回
json() 将响应体解析为json格式，并返回一个JavaScript对象
blob() 将响应头解析为二进制数据并返回一个blob对象
arrayBuffer() 将响应体解析为二进制数据并返回一个ArrayBuffer对象
formData()将对象解析为formData对象
完整的html页面的fetch请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">发送请求</button>
<p></p>
<script>
const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
sendfetch()
})
// 1.get请求，默认就是
const sendfetch = () => {
fetch('<http://localhost:3001/api/txt>',{
signal:abort.signal
}).then(async res => {
// res被进度条占用了，所以我们需要拷贝一份res用作返回值
const response=res.clone()
// 如何获取当前的进度
const reader = res.body.getReader() //当前读取的一个流，数据的一部分
const total = res.headers.get('Content-Length')//数据总长度
console.log(res)
let loaded = 0
// 设置一个while循环，if不满足条件就结束
while (true) {
// done是布尔值，如果true就说明结束了，false还有数据
// value返回unit8array 读取的数据的一部分
let { done, value } = await reader.read()
if (done) {
break
}
loaded += value.length
document.querySelector('p').innerHTML = `${(loaded / total * 100).toFixed(2)}%`
}
return response.text()
}).then(data => {
console.log(data)
})
}
// 2.post请求，请求体的数据形式json
const sendfetch=()=>{
fetch('<http://localhost:3001/api/post>',{
method:'post',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({
name:'jiack',
age:111
})
}).then(res=>{
return res.json()
}).then(data=>{
console.log(data)
})
}
</script>
</body>
</html>