本文目录：
- 1、fetch的用法是什么
- 2、fetch基础以及实践以及结合useRequest实践
- 3、fetch表示多少趟路程
- 4、carry与fetch的区别,单程和双程是什么意思
- 5、为什么使用fetch
fetch的用法是什么
fetch1
及物动词 vt.
1. (去)拿来;去拿...给[O1]
Fetch your supper yourself, Robert.
罗伯特,你自己去拿晚餐吧。 2. 去请...来,接...去
Yes, I've come to fetch you.
是的,我来接你。 3. 售得,卖得
The old watch fetched 100 dollars.
这旧表卖了一百元。 4. 【口】给...以(一拳,一击等)
She fetched him a box on the ears.
她打了他一记耳光。 5. 吸(一口气) 6. 发出(叹声等)
I heard her fetching a deep sigh.
我听见她发出一声长叹。
不及物动词 vi.
1. 取物 2. (猎狗)取回猎物 3. 绕道而行[(+about/round)]
fetch2
名词 n.
1. 活人的魂;鬼[C]
fetch基础以及实践以及结合useRequest实践
1 .fetch支持通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。
2 .
1 .fetch使用promise,而不是回调函数
2 .fetch采用模块化设计,API分散在多个对象上.
3 .fetch通过数据流处理对象,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢得场景相当有用
4 .XMLHttp对象不支持数据流,所有的数据必须存放在缓存里,不支持分块读取,必须等待全部拿到之后,在一次性吐出来
1 .fetch接收到的response是一个流对象,是服务器的回应
2 .fetch('url').then(response=response.json())
3 .
4 .response包含的数据通过Stream接口异步读取,一些同步属性可以马上读取到
5 .可以读取到的同步属性
6 .headers属性:指向一个Header对象,对应HTTP回应的所有标头
7 .读取内容的方法:根据服务器返回的不同类型的数据,提供了不同的读取方法
1 .正常情况下,response对象只能被读取一次,读取一次就没了,因为他是流对象
2 .如果想要多次读取,需要创建Response对象的副本,实现多次读取
3 .现在可以多次读取了
const response1 = await fetch('flowers.jpg');
const response2 = response1.clone()
1 .返回一个ReadableStream对象,可以分块读取内容,让用户操作
1 .fetch发出请求之后,只有网络错误,无法连接才会报错,其他任何情况都认为是请求成功
2 .服务器返回的状态码是4XX,5XX,fetch也不会报错,promise不会变为rejected状态
3 .只有通过Response.status属性,得到http回应的真实状态码,才能判断是否请求成功,还有一种就是判断response.ok是否为true
1 .第一个参数是url,第二个参数作为配置对象,定制发出的http请求
2 .POST请求
3 .不能通过headers设置的属性,Content-Length,Cookie,Host,是浏览器自动生成的
3 .提交表单
4 .上传文件,先不考虑.但是可以直接上传二进制文
1 .cache:指定如何处理缓存
2 .mode:指定请求的模式
3 .credentials:指定是否发送Cookie
4 .signal:指定一个AbortSignal实例,用于取消fetch请求
5 .keep-alive:页面卸载时,告诉浏览器在后台保持连接,继续发哦是那个数据
6 .redirect:指定http跳转的处理方法
7 .integrity:指定一个哈希值,用于检查HTTP回应传回的数据是否等于这个预先设定的哈希值
8 .referrerr:用于设定fetch请求的referer标头
9 .referrerPolicy:设定referer标头的规则
fetch表示多少趟路程
两段。fetch表示两趟路程，从哪儿来一定会回到哪儿去，路程从空间的一个位置运动到另一个位置，运动轨迹的长度叫做质点在这一运动过程所通过的路程。
carry与fetch的区别,单程和双程是什么意思
Carry表示“运载”、“携带”之意,运送的方式很多,可以用车、船,也可以用手甚至用头；fetch则表示“去拿来”（go and bring）的意思。
例：
They are carrying some paintings to the art gallery．他们正在把一些画带到艺术馆去。
This bus is licensed to carry 100 passengers．这辆巴士规定乘载一百人.
Please fetch me the documents in that room．请到那间房间去把那些文件拿来给我。
Please wait a minute．He's just gone out to fetch some water．请等一会儿.他刚出去打水。
为什么使用fetch
1,浏览器原生支持，不需要额外引入别的ajax库。
2，代替以前的XHR，是前端技术的前进方向。
3，可以搭配使用 async/await使用语法更简单。
1，一些古董浏览器可能不会支持
2，fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
3，fetch默认不会带cookie，需要添加配置项
4，无法判断请求进行的状态
1， 方式一 使用原生XHR发送请求
function XHRAjax(url, type， params) {
var xhr = new XMLHttpRequest();//创建啊一个XMLHttpRequest()实例
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status = 200 xhr.status 300) || xhr == 304) {
console.log(xhr.responseText)
} else {
console.log("request is fail" + xhr.status)
}
}
}
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置请求头
xhr.open(type, url, true);
xhr.send(params);
}
2，方式二 使用jquery ajax写法
function JQAjax(url, type, params) {
$.ajax({
type: type,
data: params,
contentType: 'application/x-www-form-urlencoded',
url: url,
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
}
})
}
3，方式三 使用axios写法
async function axiosAjax(url, type , params) {
var re = await axios({
url: url,
data: params,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
method: type
})
return re;
}
4， 方式四 使用fetch写法
async function fetchAjax(url, type, params) {
var response = await fetch(url, {
method: type,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: params
})
var re=await response.json;
return re;
}
通过对比以上几种写法，原生xhr写法太麻烦，还需自己处理浏览器兼容问题。jquery ajax其实很强大，jquery在以前普及率非常高，但现在已经被mvvc框架替代。axios当前也比较成熟，很多项目都在使用，可以结合async/await一起使用非常方便。使用fetch不需要引入别的ajax库，未来会越来越普及，但是使用过程中可能会遇到很多坑。个人建议，在项目开发尽量使用axios，个人学习上多使用fetch紧跟前端技术前进的步伐。
示例源码地址
1， 《传统 Ajax 已死，Fetch 永生》 ,2， 《fetch没有你想象的那么美》 3， 《fetch使用的常见问题及解决方法》
4，
【ftech】的内容来源于互联网，如引用不当，请联系我们修改。
评论前必须登录！
注册