浅谈fetch

本文介绍了Fetch API的出现背景,对比了它与XMLHttpRequest的区别,展示了Fetch更简洁的使用方式。同时,详细讲解了Fetch API的主要特性,包括返回Promise对象、可配置的选项如HTTP方法、请求头、状态码等。尽管Fetch在兼容性和某些功能(如进度通知)上存在不足,但其简洁的语法和更好的可读性使其成为现代Web开发的优选。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Why Fetch
在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR),Fetch ,jQuery实现的AJAX。
其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API,jquery的ajax其实是封装了XHR。
Fetch 的出现就是为了解决 XHR 的问题,拿例子说明:

使用 XHR 发送一个 json 请求一般是这样:

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

使用 Fetch 后,顿时看起来好一点

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

Fetch

 fetch(...).then(fun2)
      .then(fun3) //各依赖有序执行
      .....
      .catch(fun)

从上边的代码可以看出,fetch用起来想jQuery一样简单,虽然还是有Callback的影子,但是看起来舒服多了

详解Fetch API
兼容性

 注意:由于Fetch API是基于Promise设计,旧浏览器不支持Promise,需要使用pollyfill   es6-promise

Fetch使用说明

fetch(url, options).then(function(response) { 
// handle HTTP response
}, function(error) {
 // handle network error
})

说明:
a. fetch api返回的是一个promise对象
b.Options:

method(String): HTTP请求方法,默认为GET
body(String): HTTP的请求参数
headers(Object): HTTP的请求头,默认为{}
credentials(String): 默认为omit,忽略的意思,也就是不带cookie;还有两个参数,same-origin,意思就是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie

status(number): HTTP返回的状态码,范围在100-599之间
statusText(String): 服务器返回的状态文字描述,例如Unauthorized,上图中返回的是Ok

ok(Boolean): 如果状态码是以2开头的,则为true
headers: HTTP请求返回头
body: 返回体,这里有处理返回体的一些方法

text(): 将返回体处理成字符串类型
json(): 返回结果和 JSON.parse(responseText)一样
blob(): 返回一个Blob,Blob对象是一个不可更改的类文件的二进制数据
arrayBuffer()
formData()

缺少其它一些方法:always,progress,finally
always 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过,暂不知道如何替代。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值