h5的fetch方法_Javascript window.fetch API
关于Ajax,一个最让人诧异的秘密就是,XMLHttpRequest的底层API其实并不是为现在普遍流行的做法设计的,它本是用来做其它事情的。虽然XMLHttpRequest目前为止提供的API还是非常好用的,但其实它可以做的更好。而这更好的API已经诞生了,它就是fetch方法。下面我们来看看基本的window.fetch的用法。最新版的火狐浏览器和谷歌浏览器都提供了对这个API的支持。
XMLHttpRequest
整体看来,XMLHttpRequest过于复杂,而且它的名字有些困惑,为什么“XML”全是大写,而”Http”采用驼峰式命名方法?不管怎样,XMLHttpRequest的用法是这样的:
// Just getting XHR is a mess!
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
// Open, send.
request.open('GET', 'http://www.webhek.com/ajax-endpoint', true);
request.send(null);
当然,有很多的JavaScript框架将XMLHttpRequest封装的非常方便,但其内部都是上面这个简单例子里的乱糟糟写法。
基本的fetch用法
fetch方法是全局对象window里提供的,它的第一个参数就是URL地址:
// url (required), options (optional)
fetch('/some/url', {
method: 'get'
}).then(function(response) {
}).catch(function(err) {
// Error :(
});
它很像我们之前介绍的电池状态信息API,这个fetch API使用promises处理结果results/callbacks:
// Simple response handling
fetch('/some/url').then(function(response) {
}).catch(function(err) {
// Error :(
});;
// Chaining for more "advanced" handling
fetch('/some/url').then(function(response) {
return //...
}).then(function(returnedValue) {
// ...
}).catch(function(err) {
// Error :(
});;
如果你以前没有用过then类似的方法,那就学着使用它吧——很快到处都会出现这种方法。
处理JSON
假如说,你需求发起一个JSON请求 — 返回的数据对象里有一个json方法,能将原始数据转化成JavaScript对象:
fetch('http://www.webhek.com/demo/arsenal.json').then(function(response) {
// Convert to JSON
return response.json();
}).then(function(j) {
// Yay, `j` is a JavaScript object
console.log(j);
});
显然,它就是一个简单的JSON.parse(jsonString)调用,但json方法做为简写方式还是很方便的。
处理基本的Text/HTML响应
JSON并不是我们在任何时候都需要的数据格式,下面介绍一下如何处理HTML或文本格式的响应:
fetch('/next/page')
.then(function(response) {
return response.text();
}).then(function(text) {
// ...
console.log(text);
});
非常相似,你可以在Promise的then方法提供的response对象上使用text()。
头信息和元信息(Metadata)
response对象里还包含了丰富的HTTP头信息和metadata信息,你可以直接用get方法获取它们:
fetch('http://www.webhek.com/demo/arsenal.json').then(function(response) {
// Basic response properties, available at any time
console.log(response.status)
console.log(response.statusText)
// Grabbing response headers via `get`
console.log(response.headers.get('Content-Type'))
console.log(response.headers.get('Date'))
})
你还可以在调用请求过程中set这些头信息:
// url (required), options (optional)
fetch('/some/url', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
提交表单信息
Ajax另外一个常用的地方是发送表单数据,下面的这个例子就是如何用fetch发送表单数据:
fetch('/submit', {
method: 'post',
body: new FormData(document.getElementById('comment-form'))
});
如果你发送的数据是JSON格式:
fetch('/submit-json', {
method: 'post',
body: JSON.stringify({
email: document.getElementById('email')
answer: document.getElementById('answer')
})
});
非常容易,而且看起来也非常顺眼!
其它要说明的
fetch是一个更好用的API,但它目前还没有提供取消请求的方法,所以,程序员用起来也需要考量一下。
这个新fetch API相比起XMLHttpRequest更简单,更易读,是很好的Ajax替代方法;fetch有很明显的优势,相信很快会流行起来!
h5的fetch方法_Javascript window.fetch API相关推荐
- Js中fetch方法
Js中fetch方法 fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被 ...
- Javascript window.fetch API
Javascript window.fetch API 关于Ajax,一个最让人诧异的秘密就是,XMLHttpRequest的底层API其实并不是为现在普遍流行的做法设计的,它本是用来做其它事情的.虽 ...
- h5的fetch方法_你不需要jQuery(三):新AJAX方法fetch()
XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...
- h5的fetch方法_扣丁学堂HTML5分享h5中的fetch方法解读
扣丁学堂HTML5分享h5中的fetch方法解读 2018-07-06 14:43:10 725浏览 本篇文章扣丁学堂 Fetch概念: fetch身为H5中的一个新对象,他的诞生,是为了取代ajax ...
- 来聊一聊window.fetch
来聊一聊window.fetch Fetch 是浏览器提供的原生 AJAX 接口.使用 window.fetch 函数可以代替以前的 $.ajax.$.get和 $.post. AJAX 的原理 va ...
- fetch请求html页面,Fetch API 教程
fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求. 浏览器原生提供这个对象.本文详细介绍它的用法. 一.基本用法 fetch()的功 ...
- js ES6 fetch 方法
目录 一.fetch 概述 二.fetch 的语法 1.实现一个简单的 fetch 请求 2.fetch 方法介绍 (1).fetch 方法的第一个参数 (2).fetch 方法的第二个参数 (3). ...
- JavaScript fetch() 方法
JavaScript 中的fetch()方法 用于向服务器请求并加载网页中的信息.请求可以是返回 JSON 或 XML 格式数据的任何 API.此方法返回一个承诺. 句法: fetch( url, o ...
- Fetch()方法介绍
文章目录 前言 XMLRequest(XHR) 告别XMLHttpRequest Promise 使用方法 基本的fetch请求 Response响应 使用fetch请求发送cookie 总结 前言 ...
最新文章
- 如何从零开始搭建 CI/CD 流水线
- JAVA异常使用_每个人都曾用过、但未必都用得好
- 【转】Cache Buffer Chain 第二篇
- linux 一些常用到的命令。
- Python基础篇:某宝一键秒杀,毫秒级的精准度
- Best MSI to EXE Convert tool
- EF6+Sqlite连接字符串的动态设置
- 微信小程序自定义侧滑删除组件
- 批量打印html文档,vue项目中使用Lodop实现批量打印html页面和pdf文件
- 爆火的羊了个羊背后暗含的广告变现逻辑是什么?
- 所谓的flash、ddr、ufs
- html 中长单词换行问题
- java gprs通信教程_S7-1200 GPRS通讯快速入门
- Navicat 中文显示乱码解决之道 ,亲测可行
- 基金男孩女孩的「养基」心碎史
- Deep Retinex Decomposition for Low-Light Enhancement 论文阅读笔记
- C语言学习笔记(四)
- 计算机复试题总结(九)
- android 11中置入第三方应用apk
- 企业邮箱登陆入口有哪些?Tom企业邮箱大促