Fetch API

Meils 发布于2019-08-20 12:12 / 3467人阅读

ajax 写了多年，也用了各种 ajax 库，浏览器终于推出了一个原生的 Fetch API 实现ajax 功能。和 Fetch 一起的还有四个类：Headers Request Response Body

Fetch

window.fetch 判断浏览器是否支持

fetch(url/request[, options])

request 是一个 Request 对象，后面详细讲

options 是一个对象，主要key 如下：
method: GET/POST等
headers: 一个普通对象，或者一个 Headers 对象
body: 传递给服务器的数据，可以是字符串/Buffer/Blob/FormData，如果方法是 GET/HEAD，则不能有此参数
mode: cors / no-cors / same-origin， 是否跨域，默认是 no-cors
credentials: omit / same-origin / include
cache: default / no-store / reload / no-cache / force-cache / only-if-cached
redirect: follow / error / manual
referrer: no-referrer / client / 或者一个url
referrerPolicy: no-referrer / no-referrer-when-downgrade / origin /  origin-when-cross-origin / unsafe-url
integrity: 资源完整性验证

fetch() 返回一个 promise，所以这么用

fetch()
.then(response => {
  if (response.ok) {
  // 成功处理
  }
}).catch(error => {
  // 异常处理
})

网络错误，权限问题等会报异常，404不算作异常
所以还需要通过 response.ok 判断是否成功

例如：

var headers = new Headers();
headers.append("Content-Type", "image/jpeg");

/* headers 也可以是一个对象
 * {"Content-Type": "image/jpeg"}
*/
var init = {
  method: "GET",
  headers: headers,
  mode: "cors",
  cache: "default"
};

fetch("xxxxx.jpg", init)
.then(response => {
  // XXXX
});

Request

var request = new Request(url/request[, options]);
Request 参数和 fetch 参数相同

Headers

var headers = new Headers([init])
init 可以是一个普通对象或者是一个 Headers 对象

Headers对象有以下方法

append(key, value)
delete(key)
entries()  返回一个遍历器，类似二维数组，每一个 key 和它对应的 value 构成一个数组
get(key) 获取指定 key 的value，如果key被添加了多次，则返回第一次添加时的 value
getAll(key) 返回 key 对应的所有 value，组成一个数组
has(key)
keys() 所有 key 组成的遍历器
set(key, value) 更改 key 的值，如果 key 不存在，则相当于 append
values() 所有 value 组成的遍历器

Body

Request 和 Response 都实现了 Body 的功能，Body 的方法在下面 Response 中详解

Response

var response = new Response([body][, init])
很少用到 new Response 一般是作为 fetch 返回的结果

response 有以下属性，都是只读的

headers
ok  status在 200 和 299 之间为 true
redirected  Boolean
status
statusText
type   basic / cors / error / opaque
url
bodyUsed

有以下方法

clone()
error()
redirect()

从 Body 实现的方法
arrayBuffer()
blob()  将body 解析为Blob文件，返回一个 promise
formData()
json()  将body 解析为json，返回一个 promise
text()  将body 解析为字符串，返回一个 promise

参考：
https://www.w3ctech.com/topic...
https://developer.mozilla.org...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80852.html

$.ajax vs axios vs fetch

摘要：使用它可以让页面请求少量的数据，而不用刷新整个页面。这是一个比较粗糙的，不符合关注分离的设计原则，配置和使用都不是那么友好。它的一个优势异步操作，但的异步操作是基于事件的异步模型，没有那么友好。 Ajax 是什么？答：Ajax是一种可以在浏览器和服务器之间使用异步数据传输（HTTP请求）的技术。使用它可以让页面请求少量的数据，而不用刷新整个页面。而传统的页面（不使用Ajax）要刷新...

bitkylin 2019-08-23 12:22 评论0 收藏0
js基础进阶--从ajax到fetch的理解

摘要：使用它可以让页面请求少量的数据，而不用刷新整个页面。基于什么答它基于的是。的库答基于上面的原因，各种库引用而生，然而最有名的就是的中的。它的一个优势异步操作，但的异步操作是基于事件的异步模型，没有那么友好。欢迎访问我的个人博客：http://www.xiaolongwu.cn 基本知识 1. Ajax是什么？答：Ajax是一种可以在浏览器和服务器之间使用异步数据传输（HTTP请求）...

SoapEye 2019-08-23 14:44 评论0 收藏0
ES6 Fetch API HTTP请求实用指南

摘要：例子张三删除用户为了删除用户，我们首先需要定位用户，然后我们定义方法类型。例子张三结论现在，你已基本了解如何使用的从服务器检索或操作资源，以及如何处理。您可以使用本文作为如何构建操作的请求的指南。 showImg(https://segmentfault.com/img/bVbjxqh?w=1000&h=562); 本次将介绍如何使用Fetch API（ES6 +）对REST API的...

Sunxb 2019-08-23 13:12 评论0 收藏0
Fetch API

摘要：现在有很多优雅的包装，但是这远远不够。一个实例代表了一个的请求部分。一旦创建，它所有的属性都是只读的。处理基本的返回不是所有的接口都返回格式的数据，所以还要处理一些类型的返回结果。最后很好用，但是现在还不允许取消一个请求。 Fetch API 一个隐藏最深的秘密就是AJAX的实现底层的XMLHttpRequest，这个方法本来并不是造出来干这事的。现在有很多优雅的API包装XHR，但是...

princekin 2019-08-20 13:44 评论0 收藏0
fetch 如何请求数据

摘要：四请求常见数据格式接下来将介绍如何使用请求本地文本数据，请求本地数据以及请求网络接口。请求网络接口获取中的数据，做法与获取本地的方法类似得到数据后，同样要经过处理一序言在传统Ajax 时代，进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱，对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...

MarvinZhang 2019-08-30 15:54 评论0 收藏0
fetch 如何请求数据

摘要：四请求常见数据格式接下来将介绍如何使用请求本地文本数据，请求本地数据以及请求网络接口。请求网络接口获取中的数据，做法与获取本地的方法类似得到数据后，同样要经过处理一序言在传统Ajax 时代，进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱，对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...

Betta 2019-08-02 16:33 评论0 收藏0