AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好。
window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。
1.语法简洁,更加语义化

2.基于标准 Promise 实现,支持 async/await

3.同构方便,使用 isomorphic-fetch

// url (必须), options (可选)
fetch('/some/url', {
method: 'get'
}).then(function(response) { }).catch(function(err) {
//中途任何地方出错...在此处理
:(
}); //使用 ES6 的 箭头函数 后:
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

fetch API 也使用了 JavaScript Promises 来处理结果/回调。自定义请求头信息极大地增强了请求的灵活性。我们可以通过 new Headers() 来创建请求头
// 创建一个空的 Headers 对象,注意是Headers,不是Header
var headers = new Headers(); // 添加(append)请求头信息
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue'); // 判断(has), 获取(get), 以及修改(set)请求头的值
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json'); // 删除某条请求头信息(a header)
headers.delete('X-My-Custom-Header'); // 创建对象时设置初始化信息
var headers = new Headers({
'Content-Type': 'text/plain',
'X-My-Custom-Header': 'CustomValue'
})

Request 对象表示一次 fetch 调用的请求信息。传入 Request 参数来调用 fetch, 可以执行很多自定义请求的高级用法:

  • method - 支持 GETPOSTPUTDELETEHEAD
  • url - 请求的 URL
  • headers - 对应的 Headers 对象
  • referrer - 请求的 referrer 信息
  • mode - 可以设置 corsno-corssame-origin
  • credentials - 设置 cookies 是否随请求一起发送。可以设置: omitsame-origin
  • redirect - followerrormanual
  • integrity - subresource 完整性值(integrity value)
  • cache - 设置 cache 模式 (defaultreloadno-cache)

Request 的示例如下:

var request = new Request('/users.json', {
method: 'POST',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain'
})
}); // 使用!
fetch(request).then(function() { /* handle response */ });

只有第一个参数 URL 是必需的。在 Request 对象创建完成之后, 所有的属性都变为只读属性. 请注意, Request有一个很重要的 clone 方法, 特别是在 Service Worker API 中使用时 —— 一个 Request 就代表一串流(stream), 如果想要传递给另一个 fetch 方法,则需要进行克隆。因为 Request 和 fetch 的签名一致, 所以在 Service Workers 中, 你可能会更喜欢使用 Request 对象。

Response 代表响应, fetch 的 then 方法接收一个 Response 实例, 当然你也可以手动创建 Response 对象

可以配置的参数包括:

  • type - 类型,支持: basiccors
  • url
  • useFinalURL - Boolean 值, 代表 url 是否是最终 URL
  • status - 状态码 (例如: 200404, 等等)
  • ok - Boolean值,代表成功响应(status 值在 200-299 之间)
  • statusText - 状态值(例如: OK)
  • headers - 与响应相关联的 Headers 对象

Response 提供的方法如下:

  • clone() - 创建一个新的 Response 克隆对象.
  • error() - 返回一个新的,与网络错误相关的 Response 对象.
  • redirect() - 重定向,使用新的 URL 创建新的 response 对象..
  • arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
  • blob() - 返回一个 promise, resolves 是一个 Blob.
  • formData() - 返回一个 promise, resolves 是一个 FormData 对象.
  • json() - 返回一个 promise, resolves 是一个 JSON 对象.
  • text() - 返回一个 promise, resolves 是一个 USVString (text).

1.JSON格式

fetch('http://jartto.wang/test.json')
.then(function(response) {
// Convert to JSON
return response.json();
})
.then(function(result) {
console.log(result);
});

2.返回HTML/text

fetch('/next/page')
.then(function(response) {
return response.text();
}).then(function(text) {
// <!DOCTYPE ....
console.log(text);
});

3.发送form表单数据

//form data
var form = document.querySelector('form');
fetch('http://jartto.wang/submit', {
method: 'post',
body: new FormData(form)
});
//JSON
fetch('http://jartto.wang/submit-json', {
method: 'post',
body: JSON.stringify({
name: 'jartto',
blog: 'http://jartto.wang'
})
});

4.图片的处理

fetch('http://jartto.wang/logo.png')
.then(function(response) {
return response.blob();
})
.then(function(imageBlob) {
document.querySelector('img').src = URL.createObjectURL(imageBlob);
});

缺点

1.不可以取消:Ajax调用XMLHttpRequest对象上的abort方法,但是Fetch好像没啥办法。

2.浏览器支持:浏览器支持不是很好,但是我们可以用window.fetch polyfill来处理兼容问题。浏览器支持情况大致如下:

- Chrome 
- Firefox
- Safari 6.1+
- Internet Explorer 10+
 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch,上线一个多月以来运行非常稳定。结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的。

参考:

Fetch-新一代Ajax API的更多相关文章

  1. 新一代Ajax API --fetch

    之前 师傅跟我提过 一个新的Ajax API  fetch 今天看到一篇关于fetch的文章,受益匪浅. XMLHttpRequest并不是专为Ajax而设计的,虽然各种框架对XHR的封装已经足够好用 ...

  2. 新一代AJAX API:FETCH

    AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好.更好用的API是 fe ...

  3. Fetch和ajax的比较和区别

    传统 Ajax 已死,Fetch 永生   Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全 ...

  4. 使用 Fetch完成AJAX请求

    使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般 ...

  5. 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR); This kind of functionality was previously achieved using XMLHttpRequest.

    原生 JS Ajax,GET和POST 请求实例代码_javascript技巧_脚本之家 https://www.jb51.net/article/86157.htm 更新时间:2016年06月08日 ...

  6. 三种获取数据的方法fetch和ajax和axios

    一 .fetch用法 ( 本人比较喜欢fetch,代码精简,虽说目前axios比较流行,但是fetch很多大厂已经开始用fetch开始封装了, 我觉得以后fetch会取代axios和ajax ) 1. ...

  7. fetch VS AJAX

    fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', ...

  8. 使用fetch代替ajax请求 post传递方式

    let postData = {a:'b'}; fetch('http://data.xxx.com/Admin/Login/login', { method: 'POST', mode: 'cors ...

  9. 可用于nodejs的SuperAgent(ajax API)

    简单示例: import request from 'superagent';//引用声明 request.post(api) .withCredentials()//跨域 .end((err, re ...

随机推荐

  1. 最近面试前端面试题整理(css部分)

    对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中 答案: <div id="box"> <div> 测试 </div> ...

  2. CentOS基础命令

    为网卡配置静态IP地址建议通过交互式界面nmtui进行配置 firewalld和iptablesCentOS7使用firewald取代原来的iptables,但实际上底层还是iptables,在上层加 ...

  3. C#中的unsafe

    为了保持类型安全性,默认情况下,C# 不支持指针算法. 但是,通过使用 unsafe 关键字,可以定义可在其中使用指针的不安全上下文. 有关指针的详细信息,请参阅主题指针类型. 备注 在公共语言运行时 ...

  4. WebExtensions & tabs.executeScript()

    tabs.executeScript() https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs ...

  5. BZOJ 1927 星际竞速(费用流)

    考虑费用流,题目要求走n个点都走完且恰好一次,显然流量的限制为n. 建立源点s和汇点t,并把每个星球拆成两个点i和i',分别表示已到达该点和经过该点. 对于能力爆发,建边(s,i',1,w). 对应高 ...

  6. 【bzoj4832】[Lydsy2017年4月月赛]抵制克苏恩 概率期望dp

    题目描述 你分别有a.b.c个血量为1.2.3的奴隶主,假设英雄血量无限,问:如果对面下出一个K点攻击力的克苏恩,你的英雄期望会受到到多少伤害. 输入 输入包含多局游戏. 第一行包含一个整数 T (T ...

  7. 封装一个jquery库

    现在Javascript库海量,流行的也多,比如jQuery,YUI等,虽然功能强大,但也是不万能的,功能不可能涉及方方面面,自己写一个的JS库是对这些的补充,很多也比较实用,把应用到项目中中去也比较 ...

  8. [转载]看看大牛们是怎样获得英文综述(reviews)的?

    对于做实验的童鞋来说,平时看综述必不可少,可是如何获得自己想要的却并不是一件容易的事情,这里整理并推荐几种行之有效的方法: 1. http://www.annualreviews.org/,这是一个顶 ...

  9. hadoop 将HDFS上多个小文件合并到SequenceFile里

    背景:hdfs上的文件最好和hdfs的块大小的N倍.如果文件太小,浪费namnode的元数据存储空间以及内存,如果文件分块不合理也会影响mapreduce中map的效率. 本例中将小文件的文件名作为k ...

  10. 【题解】Atcoder ARC#83 E-Bichrome Tree

    哈哈~自己做出来的E题!(虽然这题被机房大佬强D极水).最开始神经错乱,写了个完全不对的贪心,竟然只错了4个点(。•ˇ‸ˇ•。) 可以发现,一个节点的子树内部和他颜色相同的节点权值和 是固定的,那么不 ...