useRequest相比fetch不能做的东西
1 .fetch支持通过数据流(Stream 对象)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流,所有的数据必须放在缓存里,不支持分块读取,必须等待全部拿到后,再一次性吐出来。
2 .
fetch特点
1 .fetch使用promise,而不是回调函数
2 .fetch采用模块化设计,API分散在多个对象上.
3 .fetch通过数据流处理对象,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢得场景相当有用
4 .XMLHttp对象不支持数据流,所有的数据必须存放在缓存里,不支持分块读取,必须等待全部拿到之后,在一次性吐出来
Response
1 .fetch接收到的response是一个流对象,是服务器的回应
2 .fetch('url').then(response=>response.json())
3 .
async function getJSON() {
let url = 'https://api.github.com/users/ruanyf';
try {
let response = await fetch(url);
//现在的response也是一个流对象
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}
4 .response包含的数据通过Stream接口异步读取,一些同步属性可以马上读取到
5 .可以读取到的同步属性
1 .status:返回一个数字,表示HTTP状态码
2 .statusText:返回一个字符串,表示HTTP回应的状态信息,请求成功后,服务器返回OK
3 .ok:返回一个布尔值,表示请求是否成功,true对应http请求的状态码从200-299,false对应的状态码
4 .url:返回请求的URL.如果URL存在跳转,改属性返回的是最后的url
5 .type:属性返回的请求类型:basic,普通请求,一般的同源请求,cors:跨域请求,error:网络错误,
6 .redirected:返回一个布尔值,表示请求是否发生过跳转
6 .headers属性:指向一个Header对象,对应HTTP回应的所有标头
1 .Headers.get():根据键名返回键值
2 .Headers.has():返回一个布尔值,是否有这个标头
3 .Headers.set():将指定的键名设置为新的建值,如果改键名不存在则会添加
4 .Headers.append():添加header标头
5 .Headers.delete()
6 .Header.keys():遍历标头的键名
7 .读取内容的方法:根据服务器返回的不同类型的数据,提供了不同的读取方法
1 .response.text():用于获取文本数据,比如HTML文件.也就是说可以再服务端把html,js,css代码都输出成字符串,然后这里引入,就可以直接使用了
2 .response.json():获取服务器返回的json数据
3 .response.formData():主要是再Service Worker里面,拦截用户提交的表单,修改某些数据之后,再提交给服务器
4 .response.blob()获取二进制文件
const response = await fetch('flower.jpg');
const myBlob = await response.blob();
const objectURL = URL.createObjectURL(myBlob);
const myImage = document.querySelector('img');
myImage.src = objectURL;
5 .response.arrayBuffer():获取流媒体文件
const audioCtx = new window.AudioContext();
const source = audioCtx.createBufferSource();
const response = await fetch('song.ogg');
const buffer = await response.arrayBuffer();
//拉取这首歌
const decodeData = await audioCtx.decodeAudioData(buffer);
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = true;
//在线播放
Response.clone()
1 .正常情况下,response对象只能被读取一次,读取一次就没了,因为他是流对象
2 .如果想要多次读取,需要创建Response对象的副本,实现多次读取
3 .现在可以多次读取了
const response1 = await fetch('flowers.jpg');
const response2 = response1.clone()
useRequest里面好像看不到这些东西
const {loading,run}=useRequest((data)=>({
// 这里的data应该是run传进来的
url:"http://127.0.0.1:8080/insert",
method:"post",
body:JSON.stringify(data),
headers:{
'Content-Type': 'application/json;charset=utf-8'
}
}),{
manual:true,
onSuccess:(result,params)=>{
console.log(result)
if(result.status==='ok'){
message.success('流程已经提交')
}
}
})
Response.body属性
1 .返回一个ReadableStream对象,可以分块读取内容,让用户操作
const response = await fetch('flower.jpg');
const reader = response.body.getReader();
//返回一个遍历器
while(true) {
const {done, value} = await reader.read();
//遍历器的read方法,每次返回一个对象,表示本次读取的内容块
if (done) {
//done属性是一个布尔值,用来判断有没有读完
break;
}
console.log(`Received ${value.length} bytes`)
//value属性是一个arrayBuffer对象,表示内容块的内容,value.length表示当前属性块的大小
}
判断请求是否成功
1 .fetch发出请求之后,只有网络错误,无法连接才会报错,其他任何情况都认为是请求成功
2 .服务器返回的状态码是4XX,5XX,fetch也不会报错,promise不会变为rejected状态
3 .只有通过Response.status属性,得到http回应的真实状态码,才能判断是否请求成功,还有一种就是判断response.ok是否为true
if(response.ok){
//请求成功
}else{
//请求失败
}
fetch第二个参数,定制http请求
1 .第一个参数是url,第二个参数作为配置对象,定制发出的http请求
2 .POST请求
const response=await fetch(url,{
methos:"POST",
headers:{
"Content-type":"application/json,charset=UTF-8",
//默认发送的是纯文本(text/plain),需要设置成json
body:JSON.stringify(json数据)
//body里面是传递的数据
}
})
3 .不能通过headers设置的属性,Content-Length,Cookie,Host,是浏览器自动生成的
3 .提交表单
const form = document.querySelector('form')
const response=await fetch('/users',{
method:"POST",
body:new FormData(form)
})
4 .上传文件,先不考虑.但是可以直接上传二进制文
fetch配置对象的完整API
const response = fetch(url, {
method: "GET",
headers: {
"Content-Type": "text/plain;charset=UTF-8"
},
body: undefined,
referrer: "about:client",
referrerPolicy: "no-referrer-when-downgrade",
mode: "cors",
credentials: "same-origin",
cache: "default",
redirect: "follow",
integrity: "",
keepalive: false,
signal: undefined
});
1 .cache:指定如何处理缓存
1 .default:现在缓存里面寻找匹配的请求
2 .no-store:直接请求远程服务器,不更新缓存
3 .reload:直接请求远程服务器,并且更新缓存
4 .no-cache:将服务器资源和本地缓存比较.有新的版本才使用服务器资源,否则使用缓存
//感觉这个比较有用
5 .force-cache:缓存优先,缓存不存在的时候,才请求远程服务器
//这个也差不多
6 .only-if-cached:只检查缓存,缓存不存在,将返回504
2 .mode:指定请求的模式
1 .cors:允许跨域请求
2 .same-origin:只允许同源请求
3 .no-cors:请求方法只能用于get,post,head,并且只能使用有限的几个简单标头,不能添加跨域的复杂标头,相当于表单所能发出的请求
3 .credentials:指定是否发送Cookie
1 .same-origin:同源请求发送Cookie,跨域请求时不发送
2 .include:不管同源请求,还是跨域请求,一律发送Cookie
3 .omit:一律不发送
4 .signal:指定一个AbortSignal实例,用于取消fetch请求
5 .keep-alive:页面卸载时,告诉浏览器在后台保持连接,继续发哦是那个数据
1 .当用户离开网页时,脚本向服务器提交一些用户行为的统计信息.如果keepalive是false,数据无法发送,因为浏览器已经把页面卸载了
6 .redirect:指定http跳转的处理方法
1 .follow:默认值,fetch跟随http跳转
2 .error:如图发生跳转,fetch就报错
3 .manual:fetch不跟随HTTP跳转,但是response.url属性会指向新的URL,response.redirected属性会变为true,由开发者自己决定后续如何处理跳转
7 .integrity:指定一个哈希值,用于检查HTTP回应传回的数据是否等于这个预先设定的哈希值
1 .下载文件时,检查文件的哈希值是否一致,确保没有被篡改
fetch('http://site.com/file', {
integrity: 'sha256-abcdef'
});
8 .referrerr:用于设定fetch请求的referer标头
1 .可以是任意字符串,也可以设定为空字符串,不发送referer标头
fetch('/page',{
referrer:""
})
9 .referrerPolicy:设定referer标头的规则
1 .no-referrer-when-downgrade:总是发送,除非从https页面请求http资源不发送
2 .unsafeurl:任何时候都发送referer标头
3 .no-referrer:不发送标头
4 .same-origin:跨域请求不发送referer,同源请求发送
5 .origin:referer标头只包含域名,不包含完成路径
6 .origin-when-cross-origin:同源请求referer标头包含完整的路径,跨域请求只包含域名
7 .strict-origin:referer标头只包含域名,HTTPS页面请求http资源时不发送referer标头
8 .strict-origin-when-cross-origin:同源请求时referer标头包含完整路径,跨域请求时只包含域名,HTTPS页面请求http资源时不发送标头
取消fetch请求
let controller = new AbortController();
//实例化一个AbortController对象
let signal = controller.signal
fetch(url, {
signal: controller.signal
//把实例化对象接入到fetch请求里面
});
signal.addEventListener('abort',
() => console.log('abort!')
//监听发生了取消操作
);
controller.abort();
//实际取消的地方