fetch基础以及实践以及结合useRequest实践

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();
//实际取消的地方