Fetch-新一代Ajax API
window.fetch
方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。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))
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
- 支持GET
,POST
,PUT
,DELETE
,HEAD
url
- 请求的 URLheaders
- 对应的Headers
对象referrer
- 请求的 referrer 信息mode
- 可以设置cors
,no-cors
,same-origin
credentials
- 设置 cookies 是否随请求一起发送。可以设置:omit
,same-origin
redirect
-follow
,error
,manual
integrity
- subresource 完整性值(integrity value)cache
- 设置 cache 模式 (default
,reload
,no-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
- 类型,支持:basic
,cors
url
useFinalURL
- Boolean 值, 代表url
是否是最终 URLstatus
- 状态码 (例如:200
,404
, 等等)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+
$.ajax
迁移到 Fetch
,上线一个多月以来运行非常稳定。结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的。Fetch-新一代Ajax API的更多相关文章
- 新一代Ajax API --fetch
之前 师傅跟我提过 一个新的Ajax API fetch 今天看到一篇关于fetch的文章,受益匪浅. XMLHttpRequest并不是专为Ajax而设计的,虽然各种框架对XHR的封装已经足够好用 ...
- 新一代AJAX API:FETCH
AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好.更好用的API是 fe ...
- Fetch和ajax的比较和区别
传统 Ajax 已死,Fetch 永生 Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全 ...
- 使用 Fetch完成AJAX请求
使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般 ...
- 使用 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日 ...
- 三种获取数据的方法fetch和ajax和axios
一 .fetch用法 ( 本人比较喜欢fetch,代码精简,虽说目前axios比较流行,但是fetch很多大厂已经开始用fetch开始封装了, 我觉得以后fetch会取代axios和ajax ) 1. ...
- fetch VS AJAX
fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', ...
- 使用fetch代替ajax请求 post传递方式
let postData = {a:'b'}; fetch('http://data.xxx.com/Admin/Login/login', { method: 'POST', mode: 'cors ...
- 可用于nodejs的SuperAgent(ajax API)
简单示例: import request from 'superagent';//引用声明 request.post(api) .withCredentials()//跨域 .end((err, re ...
随机推荐
- 【Docker 命令】- rm命令
docker rm :删除一个或多少容器 语法 docker rm [OPTIONS] CONTAINER [CONTAINER...] OPTIONS说明: -f :通过SIGKILL信号强制删除一 ...
- BZOJ 1293 生日礼物(尺取法)
把坐标离散化之后就是很普通的尺取法啦. # include <cstdio> # include <cstring> # include <cstdlib> # i ...
- java 读写文件乱码问题
这样写,会出现乱码.原因是文件时gbk格式的, BufferedReader br = new BufferedReader(new FileReader(indir)); BufferedWrite ...
- [HNOI2010]合唱队 区间DP
---题面--- 题解: 偶然翻到这道题,,,就写了. 观察到一个数被插在哪里只受前一个数的影响,如果明确了前一个数是哪个,那么我们就可以确定大小关系,就可以知道当前这个数插在哪里,而上一个插入的数就 ...
- P2672 推销员 优先队列 + 贪心
---题面--- 题解: 我会说我想这道普及组题都想了好久么.... 不熟练的普及组选手.jpg 最后随便猜了一个结论居然是对的... 放结论: 假设x = i的最优决策为f[i], 那么f[i + ...
- [APIO2017]商旅 0/1分数规划
---题面--- 题解: upd: 在洛谷上被Hack了...思路应该是对的,代码就别看了 感觉有个地方还是非常妙的,就是因为在x买东西,在y卖出,就相当于直接从x走向了y,因为经过中间的城市反正也不 ...
- Android ListView各种效果实现总结,持续更新...
一.ListView圆角:重写ListView的onInterceptTouchEvent方法,通过pointToPosition(x,y)方法判断当前点击位置所对应的项,有三种情况:分别是第一项.最 ...
- BZOJ3076 & 洛谷3081:[USACO2013 MAR]Hill Walk 山走——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3076 https://www.luogu.org/problemnew/show/P3081#sub ...
- git 回退
回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git rese ...
- postman ubuntu 14.04 安装
https://jingyan.baidu.com/album/e3c78d649735d63c4c85f5e5.html?picindex=1 实测有效---