浅谈fetch

最新推荐文章于 2025-03-29 16:12:09 发布

原创最新推荐文章于 2025-03-29 16:12:09 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了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 这种进度通知的功能还没有用过，暂不知道如何替代。