ajax 写了多年,也用了各种 ajax 库,浏览器终于推出了一个原生的 Fetch API 实现ajax 功能。和 Fetch 一起的还有四个类:Headers Request Response Body
Fetchwindow.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 参数相同
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 中详解
Responsevar 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 是什么? 答:Ajax是一种可以在浏览器和服务器之间使用异步数据传输(HTTP请求)的技术。使用它可以让页面请求少量的数据,而不用刷新整个页面。而传统的页面(不使用Ajax)要刷新...
摘要:使用它可以让页面请求少量的数据,而不用刷新整个页面。基于什么答它基于的是。的库答基于上面的原因,各种库引用而生,然而最有名的就是的中的。它的一个优势异步操作,但的异步操作是基于事件的异步模型,没有那么友好。 欢迎访问我的个人博客:http://www.xiaolongwu.cn 基本知识 1. Ajax是什么? 答:Ajax是一种可以在浏览器和服务器之间使用异步数据传输(HTTP请求)...
摘要:例子张三删除用户为了删除用户,我们首先需要定位用户,然后我们定义方法类型。例子张三结论现在,你已基本了解如何使用的从服务器检索或操作资源,以及如何处理。您可以使用本文作为如何构建操作的请求的指南。 showImg(https://segmentfault.com/img/bVbjxqh?w=1000&h=562); 本次将介绍如何使用Fetch API(ES6 +)对REST API的...
摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...
摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...
阅读 3020·2023-04-25 16:50
阅读 844·2021-11-25 09:43
阅读 3461·2021-09-26 10:11
阅读 2495·2019-08-26 13:28
阅读 2509·2019-08-26 13:23
阅读 2399·2019-08-26 11:53
阅读 3549·2019-08-23 18:19
阅读 2969·2019-08-23 16:27