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();
//实际取消的地方
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容

  • 较系统整理了下Fetch和Ajax: Fetch和Ajax的区别: FetchAjaxfetch基于Promise...
    一蓑烟雨任平生_cui阅读 925评论 0 2
  • Fetch API 2021-11-08定义:fetch()是 XMLHttpRequest 的升级版,用于在 J...
    keZer0阅读 252评论 0 0
  • 作者:©缉熙Soyaine 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目...
    未枝丫阅读 524评论 0 1
  • 什么是爬虫 又称 网络机器人,是一种按照一定规则,自动抓取万维网信息的程序或者脚本。通俗的讲: 就是模拟客户端发起...
    暴走的金坤酸奶味阅读 274评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,639评论 18 139